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

Northwest North Northeast
West   East
Southwest South Southeast

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