Easy Lightweight Tooltip Popup Plugin For jQuery - tip.js

Just another jQuery tooltip plugin which helps you attach clean looking tooltips to any DOM elements using HTML5 data attributes.

How to use it:

1. Include the CSS file tip.css in the header of the webpage that will provide the default CSS styles for the tooltips.

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

2. Include jQuery library and the main JavaScript file tip.js at the bottom of the webpage.

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

3. Initialize the tooltip plugin.

$(".tip").tip();

4. Add the CSS class 'tip' to the target element and define the tooltip content using the data-tip attribute as follow:

<button class="tip" data-tip="show me the money">Hover me</button>

5. Customize the position of your tooltip using the data-position attribute:

<button class="tip" data-position="bottom-center" data-tip="show me the money">Hover me</button>

6. You can also customize the tooltip plugin in the javascript during init.

$(".tip").tip({

  // CSS selector of target element
  target: "#tip",

  // tooltip content
  tip: "Tip is a useful jQuery plugin",

  // custom position
  position: "left",

  // tooltip templates
  TIP_WRAP: '<div class="tip-wrap {position} ' + CLS_HIDE + '" id="tip-{id}"></div>',
  TIP_CONTENT: '<div class="tip-content">{content}</div>'

});

Change log:

2016-12-28

• JS & CSS update

---

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