Easy Customizable Tooltip Plugin For jQuery - Tooltiper.js

File Size: 7.11 KB
Views Total: 659
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 

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.


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

  title: 'Tooltiper',
  position: 'top'

6. Override the default CSS styles of your tooltips.

  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.