jQueryプラグインのtooltipsterの使い方

jQueryプラグインのtooltipsterの使い方です。

こちらよりダウンロードします。

jsファイルは一つですが、cssファイルがかなりあります。

まず全てプリロードします。

引数には空オブジェクトを指定し、セレクタにtooltipsterメソッドを実行します。

title属性で指定した文言が吹き出しとして表示されます。

DEMO

空のオブジェクトに色々指定することで吹き出しの表示方法を変更することができます。

arrow:falseとすることにより、吹き出しの矢印を非表示にします。

position:rightとすることにより、吹き出しを右側に表示します。その他、left,top,bottom等も指定できます。(シングルクォーテーションで囲む必要があります)

DEMO

今まではマウスオーバーによってtitle属性で指定した文言が吹き出しが表示されました。

これをtrigger:’none’とすることによってマウスオーバーによる吹き出しを解除することができます。

content:~~~とすることによって~~~が表示されるようにできます。

とすることによって表示することができるようになります。

試しにテキストボックスが3文字以下なら吹き出しを表示するようにします。

DEMO

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA