jTippyはjQueryツールチッププラグイン。

jQuery 3.0+

コードにプラグインを含める

<link rel="stylesheet" href="jTippy-master/jTippy.min.css">
<script src="jTippy-master/jTippy.min.js"></script>

デフォルト設定

<a href='#' 
    data-toggle="tooltip"
    title="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.">
    There are many variations of...
</a>

$(function(){
  $('[data-toggle="tooltip"]').jTippy();
});

$(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
  });
});

データ属性を設定

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

MIT

• Tag
• jQuery
• Tooltip