Foundation
Tooltips
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.
<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
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:
<span data-tooltip data-options="disable-for-touch:true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
Available SCSS Variables
$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 darken($primary-color, 20%);
$has-tip-font-color-hover: $primary-color;
$has-tip-cursor-type: help;
$tooltip-padding: em-calc(8);
$tooltip-bg: #000;
$tooltip-font-size: em-calc(15);
$tooltip-font-weight: bold;
$tooltip-font-color: #fff;
$tooltip-line-height: 1.3;
$tooltip-close-font-size: em-calc(10);
$tooltip-close-font-weight: normal;
$tooltip-close-font-color: #888;
$tooltip-font-size-sml: em-calc(14);
$tooltip-radius: $global-radius;
$tooltip-pip-size: 5px;
Using the Javascript
foundation.js are available on your page. You can refer to the javascript documentation on setting that up.
Just add foundation.tooltips.js AFTER the foundation.js file. Your markup should look something like this:
<body>
...
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
</body>
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:
<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>
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.
{
selector : '.has-tip',
additionalInheritableClasses : [],
tooltipClass : '.tooltip',
touchCloseText: 'tap to close',
disable-for-touch: false,
tipTemplate : function (selector, content) {
return '<span data-selector="' + selector + '" class="'
+ Foundation.libs.tooltips.settings.tooltipClass.substring(1)
+ '">' + content + '<span class="nub"></span></span>';
}
}