わずか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: '「赤色のツールチップ」右上の閉じるボタンをクリックするまで表示します。
	下側に表示。'
});
戻るボタン