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.
Trigger the tooltip via javascript:
$('#example').tooltip(options)
| Name | type | default | description |
|---|---|---|---|
| animation | boolean | true | apply a css fade transition to the tooltip |
| 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 - 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: |
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>
Attaches a tooltip handler to an element collection.
Reveals an element's tooltip.
$('#element').tooltip('show')
Hides an element's tooltip.
$('#element').tooltip('hide')
Toggles an element's tooltip.
$('#element').tooltip('toggle')