Tooltip size and position on mobile

  • Resolved kkittlive

    (@kkittlive)


    3 years, 6 months ago

    When hovering on regions closer to the left/right edge of the screen, the tooltip gets cut off and so the contents can’t be fully read. This is especially problematic on tablets and phones.

    Screencap of tooltip cutting off

    I can adjust things like font size, which helps keep things contained on smaller screens. But I’m not able to specify the tooltip width, and even with that, it doesn’t currently look like tooltips for these regions near the screen edge know to stay positioned within the screen.

    
.imapsTooltip {
  font-size: 0.8em;
  max-width: 80%; /* this doesn't work */
  /* some way to always position the tooltip within the map div? */
}

    Specific to mobile – regions have to be tapped on to make the tooltip visible, and every tap event seems to cause the page position to jump up a bit, and then when we try to scroll back down to read the tooltip, that scroll event causes the tooltip to close.

    Video showing mobile behaviour

    So for this, other than the tooltip position and size concern noted up top, I’m wondering if there’s a way to either have the initial region tap event not cause any page position jump, or to have the tooltip remain visible until the user truly taps (not scrolls) outside of the tooltip. Or any other solution really 🙂

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter kkittlive

    (@kkittlive)

    3 years, 6 months ago

    Page is currently password protected, so hopefully the screencaps are sufficiently helpful.

    I love your plugin btw!! It’s awesome 😀

    Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    3 years, 6 months ago

    Hi! Thank you for using the plugin and for the positive feedback.

    You could do something like 

    .imapsTooltip foreignObject div {
	width:100px !important;
}

    But you risk the tooltip being smaller and cutting the content inside if the css loads after the map. You should try to do the line breaks directly in the tooltip content or wrap the tooltip content in a div that you control the size, maybe with a custom class or inline css.

    With the Pro version you have options to control the tooltip size and font directly in the edit screen.

    About the jump on tap, I’m not sure what could be causing it without looking at the live map.

    Thread Starter kkittlive

    (@kkittlive)

    3 years, 6 months ago

    @carlosmoreirapt thanks for the quick and detailed reply!

    I’ve updated all the tooltips to have line breaks – seems like the most basic solution to ensure consistent behaviour at least on desktop.

    The homepage is no longer password protected, so maybe you’ll now be able to get some more insight on that jumping behaviour and the tooltips being cut off on mobile.

    https://partnerships.luckyironfish.com/

    Thanks a ton!

    Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    3 years, 6 months ago

    Hi!
    For the tooltip resize, this should help:

    @media only screen and (max-width:780px) {
.map_wrapper .imapsTooltip-group {
	transform:scale(0.5);
	transform-origin: bottom right;
}	
}

    In my Android phone, the jumping behaviour doesn’t happen. Are you experiencing this in different devices?

    Greetings, Carlos

    Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    3 years, 5 months ago

    Closing for inactivity.
    Feel free to open a new ticket if the problem persists.
    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Tooltip size and position on mobile’ is closed to new replies.

Tags