jQuery
【jQuery】jQueryツールチッププラグインtips.js
March 7, 2018

tips.jsは簡単なjQueryツールチッププラグインです。
jQuery 1.7以降が必要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascipt"></script> <script src="js/tips.js" type="text/javascript"></script>
あらかじめ作成されたCSSを使用するにtips.css
スタイルシートを追加します。
<link href="css/tips.css" media="screen" rel="stylesheet" type="text/css" />
data-tooltip
にツールチップの内容を含む属性を追加します。
<input type="email" id="email" data-tooltip="Please enter an email address" />
data-tooltip-direction
属性を追加して、ツールチップのオプションの方向を指定します。デフォルトはright
<input type="email" id="email" data-tooltip="Please enter an email address" data-tooltip-direction="top" />
ツールチップを表示するセレクタを渡します。
$.tips({ element: '.error' });
settings = { action: 'focus', // tooltip display event (click, focus, hover) debug: false, // debug console element: '.error' // selector to run the tooltip on fadeSpeed: 200, // fade speed html5: true, // uses aside for tooltip instead of div for html5 supported browsers preventDefault: false, // prevent default event when element is clicked on removeAll: false, // removes all tooltip bindings removeSpecific: false, // removes specific tooltip binding (requires element and action) tailLength: 14, // width/length of the tooltip tail for positioning tooltipClass: '' // class to add to tooltip }
MIT