jQueryプラグインgips.jsを使って、軽量かつ設定が簡単なツールチップ（tooltip）

わずか5KB足らずの軽量プラグインで、ツールチップを実装できます。設定も簡単で、hyml内のscriptタグで、IDを設定したinput要素（他の要素でも使えます）を指定し、'theme'で色を、placementで表示位置（上下左右）、textで表示するテキストを決めるだけです。また、自動で閉じる場合は、「autoHide: true」を付加します（下側のソースを参照してください）。色はthemeとして4色用意されています。これを変更、追加する場合は、外部のgips.cssを書き換えます。表示時間などの設定は、gips.jsを開いて、 settingsの delay: 、pause: 、animationSpeed: の値を変更します。

オレンジ色のボーダー内と、上の青い文字にオンマウスすると、ツールチップが発動します。

赤色のツールチップ設定のソース

$('input#red').gips({
	'theme': 'red', 
	placement: 'bottom' ,
	text: '「赤色のツールチップ」右上の閉じるボタンをクリックするまで表示します。
	下側に表示。'
});