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]" title="Tooltips are awesome, you should totally use them!">extended information</span>Rendered HTML
Hover on desktop and touch me on mobile!
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>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-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/jquery.js"></script>
<script src="js/foundation.js"></script>
<script src="js/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({
tooltips: {
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.tooltips.settings.tooltipClass.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";