<%= @page_title %>

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.

<%= code_example ' extended information ', :html %>

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:

<%= code_example ' extended information ', :html %>

---

Available SCSS Variables

<%= code_example ' $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: emCalc(8px); $tooltip-bg: #000; $tooltip-font-size: emCalc(15px); $tooltip-font-weight: bold; $tooltip-font-color: #fff; $tooltip-line-height: 1.3; $tooltip-close-font-size: emCalc(10px); $tooltip-close-font-weight: normal; $tooltip-close-font-color: #888; $tooltip-font-size-sml: emCalc(14px); $tooltip-radius: $global-radius; $tooltip-pip-size: 5px; ', :css %>

---

Using the Javascript

You'll need to include foundation.tooltips.js to make sure everything works properly. You'll also need to make sure to include zepto.js and foundation.js above the plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory:

Read how to install Foundation JavaScript

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:

<%= code_example ' ... ', :html %>

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.

<%= code_example " { selector : '.has-tip', additionalInheritableClasses : [], tooltipClass : '.tooltip', disable-for-touch: false, tipTemplate : function (selector, content) { return '' + content + ''; } }", :js %>