---
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.
***
## Accessibility
Tooltips need the attribute `role="tooltip"` so assistive devices understand what they are. On the text connected to the tooltip, you need the attribute `aria-describedby`, where the value is the ID of the tooltip it's connected to. Lucky for you, our JavaScript handles all of this for you!
The only markup change you'll need to make is adding the attribute `aria-haspopup="true"` to your tooltip text. It's helpful for screen readers, and it also makes tooltips easier to use on Windows 8 touch devices.
```html
Accessibility
```
***
## 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.
You will find all the data-options here: JavaScript Data Options
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";
```