--- title: Tooltips ---

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

*** {{> examples_tooltips_intro}} ***

Basic

You can create a tooltip using minimal markup.

HTML

{{> examples_tooltips_basic_rendered}}

Rendered HTML

{{> examples_tooltips_basic}}
***

Advanced

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

HTML

{{#markdown}} ```html extended information ``` {{/markdown}}

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

{{> examples_tooltips_disable_touch}} 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

{{> examples_tooltips_variables}} *** ## 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 `` tag:

HTML

{{#markdown}} ```html ``` {{/markdown}}

Basic

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

HTML

{{#markdown}} ```html ... ``` {{/markdown}}

Advanced

You can adjust lots of settings. For example:

JS

{{#markdown}} ```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 '' + content + ''; } } }); ``` {{/markdown}} *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/tooltips"; ```