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";