9.1 KiB
| title | description | video | sass | js |
|---|---|---|---|---|
| Tooltip | Tooltips? More like <em>Cooltips</em>. But really though, tooltips are nifty for displaying extended information for a term or action on a page. | PJMYScItyP4 | scss/components/_tooltip.scss | js/foundation.tooltip.js |
Basic Tooltip
By default, a tooltip appears below the defined term on hover.
Watch this part in video
The <span data-tooltip tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite
clear of any branches, and, if allowed to fall, would have fallen at our feet.
Tooltip Top
To get a tip-top top tooltip (lol), just add the class .top to the <span> element.
Watch this part in video
The <span data-tooltip class="top" tabindex="2" title="Fancy word for a beetle.">scarabaeus</span>
hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.
Tooltip clicking
By default, clicking on a tooltip will leave it open until you click somewhere else. However, you can disable that by adding data-click-open="false"
Watch this part in video
this
<span data-tooltip class="top" tabindex="2" title="You see? I'm open!">
tooltip will stay open
</span>
while
<span data-tooltip class="top" data-click-open="false" tabindex="2" title="I don't stay open">
this one will only be open when hovered
</span>
Tooltip Right and Left
You can also position the tooltips to the right and left of the word by adding the classes .right or .left to the <span> element.
Watch this part in video
When using Foundation in right-to-left mode, "right" still means right, and "left" still means left.
When he was dressed he went down the hall into the
<span data-tooltip class="right" tabindex="3" title="Aligned on the right">kitchen</span>.
The table was almost hidden beneath all Dudley's birthday presents. It looked as though
<span data-tooltip class="left" tabindex="4" title="Aligned on the left">Dudley</span>
had gotten the new computer he wanted, not to mention the second television and the racing bike.
Explicit Positioning
New in v6.4: Heads up! This explicit positioning model is a new feature in v6.4.
Now with tooltips you can define both positions for the tip. These tooltips have a fully explicit positioning model through which you can use both data-position and data-alignment to define both positions of the box.
These dropdowns sets various positioning and alignments. Valid positions are left/right/top/bottom. Valid alignments are left/right/top/bottom/center. Left align means left sides should line up. Right align means right sides should line up. Center align means centers should line up.
Top and Bottom positioned
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left">
Bottom Left
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center">
Bottom Center
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right">
Bottom Right
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left">
Top Left
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center">
Top Center
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right">
Top Right
</button>
Left and Right Positioned
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="top">
Right Top
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="top">
Left Top
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="center">
Right Center
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="center">
Left Center
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="bottom">
Right Bottom
</button>
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="bottom">
Left Bottom
</button>