Home » jQueryプラグイン eztip

pict-jquery.png jQueryプラグインeztip使い方のバリエーションです。


ここでは、title属性に指定したテキストではなく、インラインコンテンツを指定してツールチップに表示したり、Ajaxを使って外部HTMLファイルをツールチップに表示するケースを紹介します。どちらの場合も、title属性ではなく、rel属性を使ってコンテンツを指定します。

まずは実際にサンプルを見てもらった方が早いと思います。

インラインデータの表示


サンプル4
  1. <a rel="#local4" title="タイトル4" class="tooltip">サンプル4 </a>
これは同じページ(ローカル)にある「local4」というIDのDIVブロックをツールチップに表示します。このDIVブロックは以下のようになっています。このようにrel属性にID("#xxxx")を指定することで、同じローカルのインラインデータを指定したことになります。
  1. <div id="local4" style="display:none">ここはローカルにあるインラインのDIV要素です(4)<br/>display:noneで隠してあります。<br/><font color="red">ここは赤い文字です</font></div>
ここで注目してほしいのは、このDIVブロックがツールチップとしてのみ表示されるようにするために、display: noneの属性を指定して通常はページ上に表示されないようにしていることです。

サンプル5
  1. <a rel="#local5" title="タイトル5" class="tooltip">サンプル5 </a>
この例も同じように同じページにある「local5」というIDのDIVブロックを表示しています。このDIVブロックは以下のようにテキストはなく画像データがimgタグで指定されています。
  1. <div id="local5" style="display:none; padding:0px;">
  2. <img src="/drupal/sites/default/files/images/pict-coffee.png" width="240" height="180" /></div>

Ajaxによる外部データの表示


サンプル6
  1. <a href="/test.html" title="Title-6" class="tooltip" rel="/test.html">サンプル6</a>
このようにrel属性を使ってURLを指定します。ただし、ツールチップはダイアログではないのでマウスが対象要素の上から外に出ると自動的に消えてしまいます。従ってツールチップが大きくなってしまいスクロールが必要になる場合などはスクロールさせたりしようとするとツールチップが消えてしまいますので、あまり多くのデータを表示するには向いていません。

オプションの指定

eztipをコールする際にはいくつかのオプションが指定可能です。

  • balloon ツールチップのタイプを吹き出し(バルーン)タイプにします。trueもしくはfalseで指定します。(デフォルトはfalse)
  • xoffset, yoffset
    ツールチップの表示位置をマウスのポインターからの相対値（数値）で指定します。デフォルトはxoffsetが10, yoffsetが-10です。
  • border
    ツールチップのまわりのボーダーの太さを数値で指定します。0を指定した場合にはボーダーが描かれません。(balloonタイプの場合はこの設定は無視されます）
  • width
    ツールチップのウィンドウの横幅を常に固定値にする場合に指定します。デフォルトではコンテンツのサイズに合わせて大きさは自動的に決定されます。
  • speed
    ツールチップが画面に表示される際のフェードインエフェクトの早さを指定します。数値(ms)もしくは"fast", "slow"といった指定が可能です。デフォルトは"fast"です。詳しくはjQuerryのfadeIn Effectのページを参照してください。(IEの透過PNGの表示バグのため、balloonタイプの場合はこの設定は無視されます）

たとえば、a.tooltipのボーダーの幅を1pxにして、フェードインのスピードを"slow"にする場合には、以下のようにします。
  1. $("a.tooltip").eztip({ border: 1, speed: 'slow'});

見た目のカストマイズ

ツールチップのテキストや背景の色など見た目をカストマイズするには、スタイルシートファイルjquery.eztip.cssを変更してください。タイトル部が「#tooltip #tooltip-title」、本文が「#tooptip #tooltip-contents」、その両方を含む全体が「#tooltip」というDIV要素になっています。
  1. #tooltip {
  2.         position:absolute;
  3.         z-index: 2000;  /* bring up to front */
  4.         display: none;
  5. }
  6. #tooltip #title {
  7.         background: #000;
  8.         color: #fff;
  9.         padding: 4px 8px 3px 8px;
  10.         text-align: center;
  11.         font-size: 11px;
  12.         border: solid 3px #444;
  13.         opacity: 0.9;
  14.         -moz-opacity: 0.9;
  15.         filter: alpha(opacity = 90);
  16. }
  17. #tooltip #tooltip-contents {
  18.         background: #fff;
  19.         border: solid 3px #444;
  20.         padding: 6px 8px 6px 8px;
  21.         text-align: left;
  22.         line-height: 1.4em;
  23.         opacity: 0.9;
  24.         -moz-opacity: 0.9;
  25.         filter: alpha(opacity = 90);
  26.         zoom: 1;
  27. }

balloonタイプの場合は上記のリストにはありませんが、同じスタイルシートファイルの#balloon, #balloon-title, #balloon-contentsなどの定義を変更してください。


 

Your rating: None Average: 4 (1 vote)