Support » Plugin: Interactive Geo Maps » Popup (tooltip) size

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    Hi @pettrushkov
    Can you share the link to your page so I can check which approach would work better? Seems your image is quite big and maybe you would need some custom css to make the tooltip image smaller on mobile.
    Greetings, Carlos

    Thread Starter pettrushkov

    (@pettrushkov)

    Hi @carlosmoreirapt
    Thanks for answer, i tried to remove image from tooltip, but width remained the same (local) – https://take.ms/XBbhn. Page url to view (width image) – http://suweidi.markupus.tech/contact/

    Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    You can try adding this css to your site:

    
    @media only screen and (max-width:780px) {
    
    .imapsTooltip img,
    .imapsTooltip {
      max-width:150px !important;
    }
    .imapsTooltip * {
      font-size:1em !important;
    }
    .map_wrapper foreignObject {
    	max-width:150px !important;
    }
    }

    But you’ll also need to add some line breaks (<br>) to have the tooltip more compact.

    Thread Starter pettrushkov

    (@pettrushkov)

    This code not resolve problem – it was ignored.. I tried something similar earlier. https://take.ms/NFeo3
    Adding line breaks to tooltip also failed https://take.ms/SA4ER

    Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    Hi @pettrushkov
    I just visited the page and I don’t see the custom css in the source code, but it seems the line breaks are now working correctly?
    Greetings, Carlos

    Thread Starter pettrushkov

    (@pettrushkov)

    Hi @carlosmoreirapt
    Yes, I made line-breaks in source code and it work correct.
    But I have new question – I have big line-height with line breakers, can I change it? Rules like .contact__map * { line-height: 1; } – don’t work

    Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    You should be able to control it with this rule:

    .imapsLabel foreignObject {
    	line-height:1em !important;
    }

    Greetings, Carlos

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.