jTippy - jQuery Tooltips

Docs and Code on Github Created by HTMLGuy

Related: jAlert | jTimeout | jConfirm
Donations are appreciated (via PayPal)
Trigger:
Click Hover Focus HoverFocus
Backdrops (only works with click trigger):
Black White Blurred
Preferred Placement
Top Bottom Left Right
Sizes Tiny
Small
Medium
Large
Themes
Black Lt-Gray White Blue Green Red
Sizes Tiny
Small
Medium
Large



Documentation



All options and events with defaults:


    $(function(){
      $('[data-toggle="tooltip"]').jTippy({
            //string: overridden by the title attribute
            title: '',
            //string ('click', 'hover', 'focus', 'hoverfocus'): defines when the tooltip should be shown
            trigger: 'hoverfocus',
            //string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
            position: 'auto',
            //string ('black', 'lt-gray', 'white', 'blue', 'green', 'red')
            theme: 'black',
            //string ('tiny', 'small', 'medium', 'large')
            size: 'small',
            //string|false ('black', 'white', 'blurred'): Only works with trigger: "click"
            backdrop: false,
            //string: class(es) to add to the tooltip
            'class': '',
            //boolean: if true, when this tooltip is triggered, all others will hide
            singleton: true,
            //boolean: if true and trigger: 'click', when clicking outside the tooltip, it will be hidden
            close_on_outside_click: true,
      }).on('jt-show', function(e, tooltip){
          //triggered on show of tooltip
          //tooltip dom element is passed as the second parameter
      }).on('jt-hide', function(e){
          //triggered on hide of tooltip
      });
    });
        

All options can be set globally:


    $.jTippy.defaults.backdrop = false;
    $.jTippy.defaults.theme = 'black';
    $.jTippy.defaults.trigger = 'hover';
            

All options can be set with data attributes:


    <a href='#'
       data-toggle="tooltip"
       data-backdrop="black">
        Black backdrop!
    </a>
            

    $('[data-toggle="tooltip"]').jTippy();
            
Learn more on Github