Tooltips

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


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.


Basic

You can create a tooltip using minimal markup.

HTML

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

Rendered HTML

Hover on desktop or touch me on mobile!

Advanced

Additional classes can be added to your tooltips to change its appearance.

HTML

<span data-tooltip aria-haspopup="true" class="has-tip [tip-top tip-bottom tip-left tip-right] [radius round]" title="Tooltips are awesome, you should totally use them!">extended information</span>

Rendered HTML

Hover on desktop and touch me on mobile!

You can now also add show_on to your data-options attribute to allow your tooltips to show on small, medium, or large when the page loads. They will show on all screen sizes by default.

HTML

<span data-tooltip aria-haspopup="true" class="has-tip" data-options="show_on:large" title="Large Screen Sizes">show on</span>

Rendered HTML

Now tooltips have data-options! This tooltip will only show on.

 

Disable for touch events

If you don't want tooltips to interfere with a touch event, you can disable them for those devices, like so:

HTML

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

Tooltips applied to <a> tags will automatically be disabled for touch events, so not to interfere with the link.


Accessibility

Tooltips need the attribute role="tooltip" so assistive devices understand what they are. On the text connected to the tooltip, you need the attribute aria-describedby, where the value is the ID of the tooltip it's connected to. Lucky for you, our JavaScript handles all of this for you!

The only markup change you'll need to make is adding the attribute aria-haspopup="true" to your tooltip text. It's helpful for screen readers, and it also makes tooltips easier to use on Windows 8 touch devices.

<a data-tooltip aria-haspopup="true" class="has-tip" title="Is great!">Accessibility</a>

Customize With Sass

Tooltips can be easily customized using our provided Sass variables.

SCSS

$include-html-tooltip-classes: $include-html-classes; $has-tip-border-bottom: dotted 1px $iron; $has-tip-font-weight: $font-weight-bold; $has-tip-font-color: $oil; $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%); $has-tip-font-color-hover: $primary-color; $has-tip-cursor-type: help; $tooltip-padding: rem-calc(12); $tooltip-bg: $oil; $tooltip-font-size: rem-calc(14); $tooltip-font-weight: $font-weight-normal; $tooltip-font-color: $white; $tooltip-line-height: 1.3; $tooltip-close-font-size: rem-calc(10); $tooltip-close-font-weight: $font-weight-normal; $tooltip-close-font-color: $monsoon; $tooltip-font-size-sml: rem-calc(14); $tooltip-radius: $global-radius; $tooltip-rounded: $global-rounded; $tooltip-pip-size: 5px; $tooltip-max-width: 300px;

Configure with Javascript

It's easy to configure tooltips using our Javascript. You can use data-attributes or plain old Javascript. Make sure jquery.js, foundation.js, and foundation.tooltip.js have been included on your page before continuing. For example, add the following before the closing <body> tag:

HTML

<script src="js/vendor/jquery.js"></script> <script src="js/foundation/foundation.js"></script> <script src="js/foundation/foundation.tooltip.js"></script>

Basic

Using data-attributes is the preferred method of making changes to our Javascript.

You will find all the data-options here: JavaScript Data Options

HTML

<span data-tooltip data-options="hover_delay: 50;" class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>

Advanced

You can adjust lots of settings. For example:

JS

$(document).foundation({ tooltip: { selector : '.has-tip', additional_inheritable_classes : [], tooltip_class : '.tooltip', touch_close_text: 'tap to close', disable_for_touch: false, tip_template : function (selector, content) { return '<span data-selector="' + selector + '" class="' + Foundation.libs.tooltip.settings.tooltip_class.substring(1) + '">' + content + '<span class="nub"></span></span>'; } } });

Adding New Tooltip Content After Page Load

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('tooltip', 'reflow');

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/tooltips";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »