Fully Customizable Tooltip Popup Plugin For jQuery - Tooltipsy

The Tooltipsy jQuery plugin lets you create highly customizable, easy-to-style tooltips which can be aligned to cursor or any DOM elements.

Features:

• Supports both html content and plain text.
• Ajax content is supported as well.
• Custom animations based on CSS3.
• Custom trigger events.

How to use it:

1. Download the plugin and load the JavaScript file tooltipsy.min.js after jQuery library.

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

2. Define your tooltip content in the 'title' attribute of matched element.

<a class="tip" title="Tooltip Content">Hover Me</a>

3. Active the tooltip plugin as this:

$('.tip').tooltipsy();

4. Let's start to style the tooltip in the CSS:

.tip {
  ...
}

5. You're also allowed to define the tooltip content (e.g. html & ajax content) in the JavaScript:

$('.tip').tooltipsy({
  content: function ($el, $tip) {
    $.get('data.php', function (data) {
      $tip.html(data);
    });
    return 'Fallback content';
  }
});

6. Determine whether to align the tooltip to cursor or a given element:

$('.tip').tooltipsy({
  // or "cursor"
  alignTo: "element"
});

7. Set the offset of the tooltip.

$('.tip').tooltipsy({
  offset: [0, -1]
});

8. If you want to apply custom animations to the tooltip when it shows or hides.

$('.tip').tooltipsy({
  delay: 200,
  show: function (e, $el) {
    var cur_top = $el[0].getBoundingClientRect().top + 'px'; 
    $el.css({
        'top': '-50px',
        'display': 'block'
    }).animate({
        'top': cur_top,
        'opacity': '1.0'
    }, 500, 'easeOutBounce').css('top', cur_top);
  },
  hide: function (e, $el) {
    $el.animate({
        'top': '+=200px',
        'opacity': '0.0'
    }, 200);
  },
});

9. If you want to apply custom CSS styles to the tooltip in the JavaScript.

$('.tip').tooltipsy({
  css: {},
  className: "tooltipsy"
});

10. Customize the trigger events.

$('.tip').tooltipsy({
  showEvent: 'mouseenter',
  hideEvent: 'mouseleave'
});

11. API methods available.

// shows the tooltip
$('.tip').data('tooltipsy').show()

// hides the tooltip
$('.tip').data('tooltipsy').hide()

// removes the tooltip
$('.tip').data('tooltipsy').destroy()

---

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