Foundation
Jump to Nav

Tooltip

JavaScript

Tooltips? More like Cooltips. But really though, tooltips are nifty for displaying extended information for a term or action on a page.


Basic Tooltip

By default, a tooltip appears below the defined term on hover.

<p>
The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" 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. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
</p>

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.


Tooltip Top

To get a tip-top top tooltip (lol), just add the class .top to the <span> element.

<p>
...clearing away the brambles with the
<span data-tooltip aria-haspopup="true" class="has-tip top" data-disable-hover="false" tabindex="2" title="A tool used for cutting crops.">scythe.</span>
At the spot thus attained a second peg was driven, and about this, as a centre, a rude circle, about four feet in diameter, described. Taking now a spade himself, and giving one to Jupiter and one to me, Legrand begged us to set about one to digging as quickly as possible.
</p>

...clearing away the brambles with the scythe. At the spot thus attained a second peg was driven, and about this, as a centre, a rude circle, about four feet in diameter, described. Taking now a spade himself, and giving one to Jupiter and one to me, Legrand begged us to set about one to digging as quickly as possible.


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"

<p>
this 
<span data-tooltip aria-haspopup="true" class="has-tip top" data-disable-hover="false" tabindex="2" title="You see?  I'm open!">tooltip will stay open</span>

while 
<span data-tooltip aria-haspopup="true" class="has-tip top" data-click-open="false" data-disable-hover="false" tabindex="2" title="I don't stay open">this one will only be open when hovered</span>
</p>

this tooltip will stay open while this one will only be open when hovered


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.

When using Foundation in right-to-left mode, "right" still means right, and "left" still means left.

<p>
To speak the truth, I had no especial relish for such amusement at any time, and, at that particular moment, would most willingly have declined it; for the night was coming on, and I felt much fatigued with the exercise already taken; but I saw no mode of escape, and was fearful of disturbing my poor friend's equanimity by a refusal. Could I have depended, indeed, upon Jupiter's aid, I would have had no hesitation in attempting to get the
<span data-tooltip aria-haspopup="true" class="has-tip right" data-disable-hover="false" tabindex="3" title="Someone not using Foundation.">lunatic</span>
home by force; but I was too well assured of the old negro's disposition, to hope that he would assist me, under any circumstances, in a personal contest with his master. I made no doubt that the latter had been infected with some of the innumerable Southern superstitions about money buried, and that his phantasy had received confirmation by the finding of the scarabaeus, or, perhaps, by Jupiter's obstinacy in maintaining it to be "a bug of real gold." A mind disposed to lunacy would readily be led away by such suggestions -especially if chiming in with favorite preconceived ideas -and then I called to mind the poor fellow's speech about the beetle's being "the
<span data-tooltip aria-haspopup="true" class="has-tip left" data-disable-hover="false" tabindex="4" title="Sometimes referred to as a homepage.">index</span>
of his fortune." Upon the whole, I was sadly vexed and puzzled, but, at length, I concluded to make a virtue of necessity -to dig with a good will, and thus the sooner to convince the visionary, by ocular demonstration, of the fallacy of the opinions he entertained. </p>

To speak the truth, I had no especial relish for such amusement at any time, and, at that particular moment, would most willingly have declined it; for the night was coming on, and I felt much fatigued with the exercise already taken; but I saw no mode of escape, and was fearful of disturbing my poor friend's equanimity by a refusal. Could I have depended, indeed, upon Jupiter's aid, I would have had no hesitation in attempting to get the lunatic home by force; but I was too well assured of the old negro's disposition, to hope that he would assist me, under any circumstances, in a personal contest with his master. I made no doubt that the latter had been infected with some of the innumerable Southern superstitions about money buried, and that his phantasy had received confirmation by the finding of the scarabaeus, or, perhaps, by Jupiter's obstinacy in maintaining it to be "a bug of real gold." A mind disposed to lunacy would readily be led away by such suggestions -especially if chiming in with favorite preconceived ideas -and then I called to mind the poor fellow's speech about the beetle's being "the index of his fortune." Upon the whole, I was sadly vexed and puzzled, but, at length, I concluded to make a virtue of necessity -to dig with a good will, and thus the sooner to convince the visionary, by ocular demonstration, of the fallacy of the opinions he entertained.


Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$has-tip-font-weight Keyword or Number $global-weight-bold

Default font weight of the defined term.

$has-tip-border-bottom List dotted 1px $dark-gray

Default border bottom of the defined term.

$tooltip-background-color Color $black

Default color of the tooltip background.

$tooltip-color Color $white

Default color of the tooltip font.

$tooltip-padding Number 0.75rem

Default padding of the tooltip background.

$tooltip-font-size Number $small-font-size

Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.

$tooltip-pip-width Number 0.75rem

Default pip width for tooltips.

$tooltip-pip-height Number $tooltip-pip-width * 0.866

Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.

$tooltip-radius Number $global-radius

Default radius for tooltips.


JavaScript Reference

Initializing

The file foundation.tooltip.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

  • foundation.util.box.js
  • foundation.util.mediaQuery.js
  • foundation.util.triggers.js

Foundation.Tooltip

Creates a new instance of a Tooltip.

var elem = new Foundation.Tooltip(element, options);

Fires these events: Tooltip#event:init

NameTypeDescription
element jQuery jQuery object to attach a tooltip to.
options Object object to extend the default configuration.

Plugin Options

Use these options to customize an instance of Tooltip. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name Type Default Description
data-hover-delay number 200 Time, in ms, before a tooltip should open on hover.
data-fade-in-duration number 150 Time, in ms, a tooltip should take to fade into view.
data-fade-out-duration number 150 Time, in ms, a tooltip should take to fade out of view.
data-disable-hover boolean false Disables hover events from opening the tooltip if set to true
data-template-classes string '' Optional addtional classes to apply to the tooltip template on init.
data-tooltip-class string tooltip Non-optional class added to tooltip templates. Foundation default is 'tooltip'.
data-trigger-class string has-tip Class applied to the tooltip anchor element.
data-show-on string small Minimum breakpoint size at which to open the tooltip.
data-template string '' Custom template to be used to generate markup for tooltip.
data-tip-text string '' Text displayed in the tooltip template on open.
data-click-open boolean true Allows the tooltip to remain open if triggered with a click or touch event.
data-position-class string '' Additional positioning classes, set by the JS
data-v-offset number 10 Distance, in pixels, the template should push away from the anchor on the Y axis.
data-h-offset number 12 Distance, in pixels, the template should push away from the anchor on the X axis, if aligned to a side.
data-allow-html boolean false Allow HTML in tooltip. Warning: If you are loading user-generated content into tooltips, allowing HTML may open yourself up to XSS attacks.

Events

These events will fire from any element with a Tooltip plugin attached.

NameDescription
tooltip.zf.tooltip Fires to close all other open tooltips on the page
show.zf.tooltip Fires when the tooltip is shown
hide.zf.tooltip fires when the tooltip is hidden

Methods

show

$('#element').foundation('show');

reveals the tooltip, and fires an event to close any other open tooltips on the page

Fires these events: Tooltip#event:closeme Tooltip#event:show


hide

$('#element').foundation('hide');

Hides the current tooltip, and resets the positioning class if it was changed due to collision

Fires these events: Tooltip#event:hide


toggle

$('#element').foundation('toggle');

adds a toggle method, in addition to the static show() & hide() functions


destroy

$('#element').foundation('destroy');

Destroys an instance of tooltip, removes template element from the view.