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.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

  2. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  3. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  4. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  5. jQuery.Flexdatalist

    JavaScript

    テキスト入力候補を表示させれる「jQuery.Flexdatalist」

    jQuery.Flexdatalistはテキスト入力候補を表示させるこ…

  6. CSS3 Menu Slider

コメント

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

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

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP