Tooltips are a quick way to provide extended information on a term or action on a page.

Building With HTML Classes

Tooltips work cross browser and cross platform and are easily added to a page with a simple markup and class structure. You can apply the has-tip class to any element.

By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

Available class options:

  • tip-top: Align the tip above the element you attach it to.
  • tip-bottom: Align the tip below the element you attach it to.
  • tip-left: Align the tip to the left the element you attach it to.
  • tip-right: Align the tip to the right the element you attach it to.

Disable for Touch Devices

If you don't want tooltips to interfere with a touch event, you can disable them for those devices. To do this, you'll just need to add a data-option to your tooltip, like so:

<span data-tooltip data-options="disable-for-touch:true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

Available SCSS Variables

$include-html-tooltip-classes: $include-html-classes;

$has-tip-border-bottom: dotted 1px #ccc;
$has-tip-font-weight: bold;
$has-tip-font-color: #333;
$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
$has-tip-font-color-hover: $primary-color;
$has-tip-cursor-type: help;

$tooltip-padding: em-calc(8);
$tooltip-bg: #000;
$tooltip-font-size: em-calc(15);
$tooltip-font-weight: bold;
$tooltip-font-color: #fff;
$tooltip-line-height: 1.3;
$tooltip-close-font-size: em-calc(10);
$tooltip-close-font-weight: normal;
$tooltip-close-font-color: #888;
$tooltip-font-size-sml: em-calc(14);
$tooltip-radius: $global-radius;
$tooltip-pip-size: 5px;

Using the Javascript

Before you can use tooltips you'll want to verify that both jQuery (or Zepto) and foundation.js are available on your page. You can refer to the javascript documentation on setting that up.

Just add foundation.tooltips.js AFTER the foundation.js file. Your markup should look something like this:



      document.write('<script src=/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <!-- Other JS plugins can be included here -->



Required Foundation Library: foundation.tooltips.js

Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>
Optional JavaScript Configuration

Tooltips now support data-options configuration. You can use this functionality to disable tooltips selectively by defining data-options="disable-for-touch: true" on your tip target.

  selector : '.has-tip',
  additionalInheritableClasses : [],
  tooltipClass : '.tooltip',
  touchCloseText: 'tap to close',
  disable-for-touch: false,
  tipTemplate : function (selector, content) {
    return '<span data-selector="' + selector + '" class="'
      + Foundation.libs.tooltips.settings.tooltipClass.substring(1)
      + '">' + content + '<span class="nub"></span></span>';

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video