Elegant Tooltip Plugin With Intellegent Position - Tipy

Tipy is a small, customizable jQuery tooltip plugin to display context messages in a tooltip popup which can be attached to any DOM element.

Key features:

• Auto re-position.
• Works with any attributes.
• Custom duration.
• Easy to add your own styles.

How to use it:

1. Insert the Tipy plugin's JavaScript and CSS files into the webpage which has jQuery library loaded.

<link rel="stylesheet" href="/path/to/tipy.css">
<script src="/path/to/jquery-3.3.1.min.js"></script>
<script src="/path/to/tipy.js"></script>

2. Define the tooltip content in the data-tipy attribute. Done.

<div data-tipy="Tooltip Content">
  Hover Me
</div>

3. Customize the data attribute.

tipyController.setAttr("YourAttribute");

4. You can also attach the tooltip to a specific element in the JavaScript:

$('.element').tipy('Tooltip Content');

5. Customize the position of the tooltip.

• top (or t)
• tr (top-right)
• right (or r)
• br (bottom-right)
• bottom (or b)
• bl (bottom-left)
• left (or l)
• tl (top-left)

<div data-tipy="Tooltip Content"
     data-tipy-pos="t">
     Hover Me
</div>

// or
$('.element').tipy('Tooltip Content', 'top');

6. Customize the time to wait before triggering the tooltip.

$('.element').tipy('Tooltip Content', 'top', 500);

7. Append extra CSS classes to the tooltip. Useful for applying your own CSS styles to the toolip

<div data-tipy="Tooltip Content"
     data-tipy-class="YourClasses">
     Hover Me
</div>

$('.element').tipy('Tooltip Content', 'top', 500, 'YourClasses');

8. Enable/disable the tooltip.

tipyController.disable();
tipyController.enable();

---

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