Facebook Style Tooltip JavaScript Library – Tipsy Native

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