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

jQuery

March 7, 2018

tips.jsは簡単なjQueryツールチッププラグインです。

Getting Started

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>

Styling

あらかじめ作成されたCSSを使用するにtips.cssスタイルシートを追加します。

<link href="css/tips.css" media="screen" rel="stylesheet" type="text/css" />

Using tips.js

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'
});

Options

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

Download