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. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  2. JavaScript

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

  3. no-image

    JavaScript

    レスポンシブ対応の超軽量なjQueryイメージスライダー「tinyslide」

    tinyslideはレスポンシブに対応した超軽量なイメージスライダーを…

  4. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  5. Babylon Grid
  6. jQuery plugin Watermark

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP