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(グレイスフル デグラデーション)とのことです。

SWAPMYLIスライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「SWAPMYLI」前のページ

はてブのタグを登録していつでも手軽にその最新記事をチェックできるiPhoneアプリ「HatebuReader」次のページHatebuReader

関連記事

  1. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  2. Multi-Step-Form-Js
  3. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  4. no-image
  5. Salvattore
  6. Sticky Multi Header Scroll

コメント

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

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

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP