Tooltips
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:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Four directions
Usage
Trigger the tooltip via JavaScript:
$('#example').tooltip(options) 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: |
Markup
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
Methods
$().tooltip(options)
Attaches a tooltip handler to an element collection.
.tooltip('show')
Reveals an element's tooltip.
$('#element').tooltip('show') .tooltip('hide')
Hides an element's tooltip.
$('#element').tooltip('hide') .tooltip('toggle')
Toggles an element's tooltip.
$('#element').tooltip('toggle') .tooltip('destroy')
Hides and destroys an element's tooltip.
$('#element').tooltip('destroy') 