Tooltip
JavaScriptTooltips? 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.
Watch this part in video
<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.
| Name | Type | Default Value | Description |
|---|---|---|---|
$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
| Name | Type | Description |
|---|---|---|
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.
| Name | Description |
|---|---|
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.