Create Custom Tooltips From Title Attribute - Tooltiper

Yet another jQuery tooltip plugin that generates custom tooltips from title attribute of any elements. Supports both plain text and HTML tooltip content.

More features:

• Follows cursor move.
• Configurable show/hide animations.
• Custom CSS styles.
• Lightweight and easy to implement.

How to use it:

1. To use the plugin include jQuery library and the Tooltiper plugin on the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/tooltiper.js"></script>

2. Attach the plugin to the target element and define the tooltip content in the title attribute. That's it.

<a href="#" title="Tooltiper jQuery Plugin">
  Hover Me
</a>

$(function(){
  $("a").tooltiper();
});

3. To insert rich text into the tooltip, follow these steps.

<a href="#" title="<b>Tooltiper</b> jQuery Plugin">
  Hover Me
</a>

$(function(){
  $("a").tooltiper({
    tooltipType: 'html'
  });
});

4. Customize the animations when the tooltip appears/disappears.

$(function(){
  $("a").tooltiper({
    tooltipAppearenceMode: 'fadeIn', // jquery animations
    tooltipDisappearenceMode: 'fadeOut',
    ShowSpeed: 'fast',
    HideSpeed: 'fast'
  });
});

5. Make the tooltip always follow the cursor move.

$(function(){
  $("a").tooltiper({
    tooltipBound: 'cursor'
  });
});

6. Change the markup and styles of the tooltip.

$(function(){
  $("a").tooltiper({
    tooltipClass: 'js-tooltiper',
    tooltipOffset: 10,
    tooltipElement: 'span',
    tooltipCss: {
      // CSS rules here
    }
  });
});

---

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