Foundation
-
FollowReply
-
Tooltips position on smaller screens
byMartin Pešout Friday, September 19, 2014 at 1:54 AM EST
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:
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.
<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
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).