Author: | DigitLab |
---|---|
Views Total: | 419 views |
Official Page: | Go to website |
Last Update: | August 14, 2018 |
License: | MIT |
Preview:

Description:
Tipsy Native is a native JavaScript library for generating customizable, Facebook-like tooltips from element’s title
attribute.
Features:
- Allows to dynamically updating tooltip text.
- Custom trigger events: click, hover, focus and so on.
- Custom animations.
- Custom fallback when there’s no title attribute provided.
- Tooltip text can be based on any attribute, not just title.
- Supports HTML content.
How to use it:
Include the Tipsy Native’s stylesheet and JavaScript files onto the webpage.
<link href="/path/to/tipsy.css" rel="stylesheet"> <script src="/path/to/tipsy.js"></script>
Bind the Tipsy Native to a specified element.
Tipsy.bindSelector('#example-1');
Bind the Tipsy Native to all anchor links which have ‘rel=tipsy’ attribute.
Tipsy.watchSelector('a[rel=tipsy]');
Specify the direction.
// nw | n | ne | w | e | sw | s | se Tipsy.bind(document.querySelector('#example-2'), {gravity: 'nw'});
Config the fade animation and delay times.
Tipsy.bind(document.querySelector('#example-3'), { fade: true delayIn: 500, delayOut: 100 });
All configuration options with default values.
Tipsy.bind(document.querySelector('#example-1'), { // delay before hiding tooltip (ms) delayOut: 0, // fade tooltips in/out? fade: false, // fallback text to use when no tooltip text fallback: '', // gravity gravity: 'n', // is tooltip content HTML? html: false, // pixel offset of tooltip from element offset: 0, // opacity of tooltip opacity: 0.8, // attribute/callback containing tooltip text title: 'title', // how tooltip is triggered // hover | focus | manual trigger: 'hover' });
API Methods.
// show the tooltip document.querySelector('#example-1').tipsy.show(); // hide the tooltip document.querySelector('#example-1').tipsy.hide();
Changelog:
08/14/2018
- Fix issue with className