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 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 data-options="disable_for_touch: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 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 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.


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 #ccc; $has-tip-font-weight: bold; $has-tip-font-color: #333; $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(8); $tooltip-bg: #000; $tooltip-font-size: rem-calc(15); $tooltip-font-weight: bold; $tooltip-font-color: #fff; $tooltip-line-height: 1.3; $tooltip-close-font-size: rem-calc(10); $tooltip-close-font-weight: normal; $tooltip-close-font-color: #888; $tooltip-font-size-sml: rem-calc(14); $tooltip-radius: $global-radius; $tooltip-rounded: $global-rounded; $tooltip-pip-size: 5px;

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.

HTML

<span data-tooltip 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>'; } } });

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 »