---
title: Tooltips
layout: doc/layouts/default.html
---
# Tooltips
***
{{> 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}}
***
## 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.tooltips.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";
```