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

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  3. jquery.datepicker

    JavaScript

    未来的なデータピッカーを実装できる「jquery.datepicker」

    jquery.datepickerはWeb用の未来的なデータピッカーを…

  4. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  5. Responsive jQuery Pop Up Gallery
  6. JQuery lightSlider

    JavaScript

    軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」

    JQuery lightSliderは軽量でレスポンシブに対応したサム…

コメント

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

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

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP