実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします。(そうでもないかもしれないですが)
ダウンロード デモ
スクリプト
<link href="jquery.smallipop.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="jquery.smallipop.js" type="text/javascript">
マークアップベースで実装
a要素のtitle属性にツールチップで表示する要素を記述することで実装できます。動的に生成する場合はより容易に実現できるかと。
<a class="a-1085-1" href="#" title="That was easy!">Hover me!</a> <script type="text/javascript"> $('.a-1085-1').smallipop(); </script>
Javascriptで実装
javascriptで実装することもできます。複数要素に一括で実装する場合には便利かと思います。
<a href="#" class="a-1085-2">Hover me!</a> <script type="text/javascript"> $('.a-1085-2').smallipop( {}, "I'm the real hint!" ); </script>
オプション
Smallipopのサイトでテーマやオプションが紹介されています。オプション
ツールチップの表示方向
$('.element').smallipop({ // ツールチップを表示する方向を指定 // "top" , "bottom" , "left" , "right" preferredPosition: 'bottom' });
(フォームやリンクなど)クリックされたら表示する
$('.element').smallipop({ // クリックをトリガにする triggerOnClick: true });
sBubble | Tipped | TipTip | Tooltipify | PowerTip
関連記事
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
-
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
- PREV
- バリデーションエラーメッセージの取得
- NEXT
- コメント欄停止・コメント削除
Comment
[…] 実装方法が選べるツールチップ用プラグイン「Smallipop」 http://kwski.net/jquery/1085/ […]
jQuery | 実装方法が選べるツールチップ用プラグイン... http://owl.li/2DFm9s