jTippy - jQuery Tooltips

    $(function(){
      $('[data-toggle="tooltip"]').jTippy({
            //string/function(btn, jtippy):string - overridden by the title attribute - function is run every time the tooltip is displayed and can be used to grab content via XHR/AJAX
            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, hide){
          //triggered on show of tooltip
          //the tooltip's jquery dom object is provided as the second param
          //to hide the tooltip, run hide()
      }).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();