実装方法が選べるツールチップ用プラグイン「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
関連記事
-
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
テーブル・リスト要素を便利にしてくれるプラグイン
レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
- PREV
- バリデーションエラーメッセージの取得
- NEXT
- コメント欄停止・コメント削除







Comment
[…] 実装方法が選べるツールチップ用プラグイン「Smallipop」 http://kwski.net/jquery/1085/ […]
jQuery | 実装方法が選べるツールチップ用プラグイン... http://owl.li/2DFm9s