Facebook Style Tooltip JavaScript Library – Tipsy Native

Category: Javascript , Recommended , tooltip | August 14, 2018
Author: DigitLab
Views Total: 2,476
Official Page: Go to website
Last Update: August 14, 2018
License: MIT

Preview:

Facebook Style Tooltip JavaScript Library – Tipsy Native

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

You Might Be Interested In:


Leave a Reply