実装方法が選べるツールチップ用プラグイン「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
関連記事
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
- PREV
- バリデーションエラーメッセージの取得
- NEXT
- コメント欄停止・コメント削除







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