---
title: 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!
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
{{> examples_tooltips_show_rendered}}
Rendered HTML
{{> examples_tooltips_show}}
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({
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 '' + 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";
```