実装方法が選べるツールチップ用プラグイン「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
  • このエントリーをはてなブックマークに追加

関連記事

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

no image

ファイルアップロードフォーム プラグイン

Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

no image

「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

Comment

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑