Adaptive Tooltip Popup Plugin With jQuery - AdapTip

File Size: 8.42 KB
Views Total: 1965
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Adaptive Tooltip Popup Plugin With jQuery - AdapTip

Just another jQuery based tooltip popup plugin which has the ability to automatically set the placement direction based on the position of the matched element.

How to use it:

1. Add jQuery library and the jQuery AdapTip plugin's JS & CSS files to the webpage.

<link href="src/style.adaptip.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jquery.adaptip.js"></script>

2. Add tooltip title and content to element using data-tp attributes as follows.

<span data-tp-title="Tooltip Title" 
      data-tp-desc="Tooltip Content">
      Hover Me
</span>

3. Just call the function and we're done.

$("span").adapTip();

4. Specify the placement direction of your tooltips.

$("span").adapTip({

  // top, bottom, left, right, top right, top left, right bottom, left bottom
  "placement": "auto"
  
});

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