Minimalist Element Tooltip Plugin With jQuery - tipIt

Minimalist Element Tooltip Plugin With jQuery - tipIt
File Size: 39.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery/HTML5 tooltip plugin used to create custom, CSS3 animated and hover-triggered tooltips on the webpage. Accepted directions are top, right, bottom and left.

Installation:

# NPM
$ npm install tipit-native --save

How to use it:

1. Include the stylesheet tipit.css in the head section, and the JavaScript tipit.js just before the closing body tag.

<link href="tipit.css" rel="stylesheet">
<script src="assets/tipit.js"></script>

2. Append the tooltip to a specified element using data-tipit-content and data-tipit-placement attribute.

<div 
  data-tipit-content="Tooltip" 
  data-tipit-placement="bottom">
  Hove Me
</div>

2. Append the tooltip to a specified element using data-tipit-content and data-tipit-placement attribute.

  • data-tipit-content: custom tooltip conent.
  • data-tipit-placement: top, right, bottom or left (default).
<div 
  data-tipit-content="Tooltip" 
  data-tipit-placement="bottom">
  Hove Me
</div>

3. Show hide the tooltip manually.

$('div').showTipit();
$('div').hideTipit();

Changelog:

2019-02-01

  • Updated to the latest version
  • Added Vanilla JS version
  • Published to NPM.

This awesome jQuery plugin is developed by mrReiha. For more Advanced Usages, please check the demo page or visit the official website.