Tipsy Native
Overview
Tipsy Native is a javascript library for creating a Facebook-like tooltips effect based on an anchor tag's
title attribute.
This is almost a direct port to native javascript of
tipsy by Jason Frame.
Examples and Usage
Basic
By default, tooltips will appear centred underneath their anchor:
Example
Hover over me
Code
Tipsy.bind(document.querySelector('#example-1')); // Create for element
Tipsy.bindSelector('#example-1'); // Create for selector
Tipsy.watchSelector('a[rel=tipsy]'); // Watch for selector to be added
Gravities
Using the gravity parameter, it's possible to control the positioning of the tooltip relative to the pointee.
It is possible to use a callback function to set the gravity dynamically at hover-time. Within the callback,
this refers to the active element. Two methods are provided, Tipsy.autoNS
and Tipsy.autoWE , which select north/south and west/east gravity respectively.
Example
Dynamic Gravity
Code
Tipsy.bind(document.querySelector('#foo'), {gravity: 'n'});
// nw | n | ne | w | e | sw | s | se
Fading
You can fade the tooltips in using the fade option.
Example
Hover over me
Code
Tipsy.bind(document.querySelector('#foo'), {fade: true});
Title
Tooltip text can be based on any attribute, not just title.
Example
Hover over me
Code
Tipsy.bind(document.querySelector('#foo'), {title: 'id'});
Title Callback
Tooltip title option can also be a callback returning the tooltip text. The this the
active element.
Example
Hover over me
Code
Tipsy.bind(document.querySelector('#foo'), {title: function() {
return this.getAttribute('original-title').toUpperCase();
}});
Fallback
If no title can be found, a fallback can be used.
Example
Hover over me
Code
Tipsy.bind(document.querySelector('#foo'), {fallback: 'No tooltip here!'});
HTML
The tooltip can contain html.
Example
Hover over me
Code
Tipsy.bind(document.querySelector('#foo'), {html: true});
Delay
The tooltip can have a show and hide delay.
Example
Hover over me
Code
Tipsy.bind(document.querySelector('#foo'), {delayIn: 500, delayOut: 1000});
Dynamically Updating Text
The tooltip will dynamically update its text each time it is shown. Note: if you wish to
set the title to an empty string, set the original-title attribute instead.
Example
Hover over me |
New tooltip text:
Focus Trigger
Tooltips can be bound to a form inputs focus/blur events.
Example
Code
Tipsy.bind(document.querySelector('#foo'), {trigger: 'focus'});
Manual Trigger
Tooltips can be manually triggered.
Example
Manually triggered tooltip
Code
Tipsy.bind(document.querySelector('#foo'), {trigger: 'manual'});
//document.querySelector('#foo').tipsy.show();
//document.querySelector('#foo').tipsy.hide();
Configuration Options
defaults = {
delayIn: 0, // delay before showing tooltip (ms)
delayOut: 0, // delay before hiding tooltip (ms)
fade: false, // fade tooltips in/out?
fallback: '', // fallback text to use when no tooltip text
gravity: 'n', // gravity
html: false, // is tooltip content HTML?
offset: 0, // pixel offset of tooltip from element
opacity: 0.8, // opacity of tooltip
title: 'title', // attribute/callback containing tooltip text
trigger: 'hover' // how tooltip is triggered - hover | focus | manual
}
Download
$ git clone git://github.com/DigitLab/tipsy-native.git