Tooltipster

JavaScript

シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster」

シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster」をご紹介します。特定のクラス名を与えることで簡単にツールチップを作成することができるのでとても便利ですね。以下、使い方です。

[ads_center]

使い方

使い方はとてもシンプルです。jQuery本体とプラグインを読み込みます。

<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>

Tooltipsterをセットします。

<script>
$(document).ready(function() {
    $('.tooltip').tooltipster();
});
</script>

HTMLのマークアップではtooltipというクラス名を与えます。表示させたいテキストはtitle属性に記述していきます。

<img src="sample.png" class="tooltip" title="サンプルテキスト" />

とてもシンプルで使いやすいですね。

divで括ったりもすることができます。

<div class="tooltip" title="サンプルテキスト"> 
    <p>サンプルテキスト</p>
</div>

また、CSSでテーマをカスタマイズすることもできたり、オプションも色々あるので詳しくは公式サイトでご確認ください。

サポートされているブラウザはChrome、Safari、Opera、FireFox、IE10・9、IE8 + Graceful Degradation(グレイスフル デグラデーション)とのことです。

関連記事

  1. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

  2. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  3. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  4. jquery countDownTimer
  5. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  6. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP