Tooltip

JavaScript

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

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.

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.

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.

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.

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>

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

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.

When he was dressed he went down the hall into the kitchen. The table was almost hidden beneath all Dudley's birthday presents. It looked as though Dudley 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>

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-cursor`	Keyword	`help`	Default cursor of the defined term.
`$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-max-width`	Number	`10rem`	Default max width for tooltips.
`$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 following files must be included in your JavaScript to use this plugin:

foundation.core.js
foundation.tooltip.js
- With utility library foundation.util.box.js
- With utility library foundation.util.mediaQuery.js
- With utility library 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-disable-for-touch`	`booelan`	`false`	Disable the tooltip for touch devices. This can be useful to make elements with a tooltip on it trigger their action on the first tap instead of displaying the tooltip.
`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`	`string`	`auto`	Position of tooltip. Can be left, right, bottom, top, or auto.
`data-alignment`	`string`	`auto`	Alignment of tooltip relative to anchor. Can be left, right, bottom, top, center, or auto.
`data-allow-overlap`	`boolean`	`false`	Allow overlap of container/window. If false, tooltip will first try to position as defined by data-position and data-alignment, but reposition if it would cause an overflow. @option
`data-allow-bottom-overlap`	`boolean`	`false`	Allow overlap of only the bottom of the container. This is the most common behavior for dropdowns, allowing the dropdown to extend the bottom of the screen but not otherwise influence or break out of the container. Less common for tooltips.
`data-v-offset`	`number`	`0`	Distance, in pixels, the template should push away from the anchor on the Y axis.
`data-h-offset`	`number`	`0`	Distance, in pixels, the template should push away from the anchor on the X axis
`data-tooltip-height`	`number`	`14`	Distance, in pixels, the template spacing auto-adjust for a vertical tooltip
`data-tooltip-width`	`number`	`12`	Distance, in pixels, the template spacing auto-adjust for a horizontal tooltip
`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.closeme`	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.

Tooltip

Basic Tooltip

Tooltip Top

Tooltip clicking

Tooltip Right and Left

Explicit Positioning

Top and Bottom positioned

Left and Right Positioned

Sass Reference

Variables

JavaScript Reference

Initializing

Foundation.Tooltip

Plugin Options

Events

Methods

show

hide

toggle

_destroy