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.

Watch this part in video

edit on codepen button
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.

Tooltip Top

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

Watch this part in video

edit on codepen button
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.

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

edit on codepen button
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

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.

edit on codepen button
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.

NameTypeDefault ValueDescription
$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

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-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 &#x27;&#x27; 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 &#x27;&#x27; Custom template to be used to generate markup for tooltip.
data-tip-text string &#x27;&#x27; 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.

NameDescription
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.