Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
Hover over the links below to see tooltips:
Four directions
Html
- <a href="#" rel="tooltip" title="Default tooltip">you probably</a>
- <a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>
- <a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a>
- <a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
- <a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a>
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
| Name | type | default | description |
|---|
| animation | boolean | true | apply a css fade transition to the tooltip |
| html | boolean | false | Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. |
| placement | string|function | 'top' | how to position the tooltip - top | bottom | left | right |
| selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets. |
| title | string | function | '' | default title value if `title` tag isn't present |
| trigger | string | 'hover' | how tooltip is triggered - click | hover | focus | manual |
| delay | number | object | 0 | delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: delay: { show: 500, hide: 100 } |
Heads up! Options for individual tooltips can alternatively be specified through the use of data attributes.