JavaScript

シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

とてもシンプルな構成で簡単に実装することができるjQueryプラグインのツールチップ「jQuery PowerTip」を使ってみました。オプションでツールチップが表示される位置(東西南北)を指定したり、マウスに追従させながらの表示もできるので目的に合うツールチップを実装できるかと思います。

[ads_center]

使い方

jQuery本体とダウンロードしたjQuery PowerTipのファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="jquery.powertip.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.powertip.js"></script>

そして、セレクタにツールチップを表示させたい要素を指定していきます。

<script type="text/javascript">
$(function() {
    $('#north').powerTip({placement: 'n'});
    $('#south').powerTip({placement: 's'});
    $('#west').powerTip({placement: 'w'});
    $('#east').powerTip({placement: 'e'});
    $('#north-west').powerTip({placement: 'nw'});
    $('#north-east').powerTip({placement: 'ne'});
    $('#south-west').powerTip({placement: 'sw'});
    $('#south-east').powerTip({placement: 'se'});
});
</script>

HTMLの記述はこんな感じです。titleにツールチップで表示させるテキストを設定します。

<div id="north" title="サンプル テキスト(north)">north</div>
<div id="south" title="サンプル テキスト(south)">south</div>
<div id="west" title="サンプル テキスト(west)">west</div>
<div id="east" title="サンプル テキスト(east)">east</div>
<div id="north-west" title="サンプル テキスト(north-west)">north-west</div>
<div id="north-east" title="サンプル テキスト(north-east)">north-east</div>
<div id="south-west" title="サンプル テキスト(south-west)">south-west</div>
<div id="south-east" title="サンプル テキスト(south-east)">south-east</div>

ツールチップを目的の位置に表示させるために、要素にはwidthとheightを指定しておいた方がいいかと思います。

オプションでは、フェードイン/フェードアウトのスピード、ツールチップが表示する距離、マウスに追従させながらの表示などといった、細かい部分まで自分好みのツールチップを作り込んでいくことができるので、試してみるといいかと思います。

オプションを指定する場合は以下のようにします。

$('#north').powerTip({
    placement: 'n', // ツールチップの位置(東西南北)を指定
    followMouse: false, // マウスの動きに追従させるかどうか
    mouseOnToPopup: false, // ツールチップ上にマウスを乗せても消えないようにする
    offset: 10, // 数値を上げる程、要素から表示させるツールチップの距離が離れていく
    fadeInTime: 200, // フェードインで表示させるスピード
    fadeOutTime: 100 // フェードアウトで消えていくスピード
});

他にも色々とオプションがあるので気になる方は公式サイトで確認することができます。

以下からダウンロードすることができます。

CSSでBorder Radiusだけのコードを生成してくれるジェネレーター「CSS Border Radius Generator」前のページ

CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる次のページ

関連記事

  1. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

  2. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  3. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  4. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  5. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  6. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

コメント

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

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

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP