Easy Customizable Tooltip Plugin For jQuery - Tooltiper.js

Tooltiper.js is a very small (~2kb minified) yet highly customizable jQuery tooltip plugin used to enhance the native browser tooltips using HTML5 data attributes.

How to use it:

1. Load the required tooltiper.css for the core styles of your tooltips.

<link href="tooltiper.css" rel="stylesheet">

2. Specify the tooltip's content & position using HTML5 data attributes as shown below:

<button data-title="Tooltiped me" 
        data-position="bottom">
        Tooltiped
</button>

3. The tooltiper.js plugin requires jQuery library loaded properly in the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="tooltiper.js"></script>

4. Initialize the tooltip plugin with default options.

$("button").tooltiper();

5. You can also to the define the tooltip's content & position in the JavaScript as this:

$("button").tooltiper({
  title: 'Tooltiper',
  position: 'top'
});

6. Override the default CSS styles of your tooltips.

$("button").tooltiper({
  color: '#FFF',
  backgroundColor: '#000',
  fontSize: '10px',
  padding: "5px",
  borderRadius: 'none',
  cursor: 'auto',
  boxShadow: 'none',
});

---

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