Menu icon Foundation
Tooltips position on smaller screens

Hi,

is there anybody with the same problem? I'm using the latest Foundation 5. I have a few icons on the page and I'm trying to create tooltips on hovering that icons. Tooltips work fine on large and medium screens. See next images:

Sn mek obrazovky 2014 09 19 v 8.48.01

Sn mek obrazovky 2014 09 19 v 8.48.10

The problem starts on smaller screens. Sometimes are tooltip bubbles completely broken (arrow is outside the bubble) and sometimes it is not centered to parent object. See next image and HTML code of this element. This is the screenshot of the tooltip after hovering the WiFi icon.

Sn mek obrazovky 2014 09 19 v 8.48.26

<span data-tooltip aria-haspopup="true" class="accomm-infobar__icon has-tip" title="Internet available"><i class="icon icon--internet-yes"></i></span>

What's wrong? Do you have idea how to fix it? Is there anybody with the same problem

Thank you very much.

Martin

tooltip

Hi,

is there anybody with the same problem? I'm using the latest Foundation 5. I have a few icons on the page and I'm trying to create tooltips on hovering that icons. Tooltips work fine on large and medium screens. See next images:

Sn mek obrazovky 2014 09 19 v 8.48.01

Sn mek obrazovky 2014 09 19 v 8.48.10

The problem starts on smaller screens. Sometimes are tooltip bubbles completely broken (arrow is outside the bubble) and sometimes it is not centered to parent object. See next image and HTML code of this element. This is the screenshot of the tooltip after hovering the WiFi icon.

Sn mek obrazovky 2014 09 19 v 8.48.26

<span data-tooltip aria-haspopup="true" class="accomm-infobar__icon has-tip" title="Internet available"><i class="icon icon--internet-yes"></i></span>

What's wrong? Do you have idea how to fix it? Is there anybody with the same problem

Thank you very much.

Martin

Jesus Lugo about 5 years ago

Hi Martin,

In the Zurb guide to Foundation tooltips (http://foundation.zurb.com/docs/components/tooltips.html) states "On a small device, the tooltips are full-width and bottom aligned", however you can inspect the styles and override to match your needs (just make sure you're adding the code to the small breakpoint).