Fully Customizable Tooltip Popup Plugin For jQuery - Tooltipsy

File Size: 7.92 KB
Views Total: 2542
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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:


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:

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

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

  // or "cursor"
  alignTo: "element"

7. Set the offset of the tooltip.

  offset: [0, -1]

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

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

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

  css: {},
  className: "tooltipsy"

10. Customize the trigger events.

  showEvent: 'mouseenter',
  hideEvent: 'mouseleave'

11. API methods available.

// shows the tooltip

// hides the tooltip

// removes the tooltip

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