jQuery
【jQuery】jQueryツールチッププラグインjTippy
November 18, 2018

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