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

関連記事

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

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

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

no image

テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

Comment

Message

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

*

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

    PAGE TOP ↑