企業情報　│　お問い合わせ　│サポート

TOOLTIP - jQuery TOOLS

[ ツールチップの基本的な使い方 ] [ メニュー ] [ ブラウザのデフォルトツールチップをまねる]

ツールチップ内部でのHTML使用

ツールチップのコンテンツは、プレーンテキストだけでなく、HTMが使用できます。ダウンロードボタンの上にマウスを移動すると、イメージ、テーブル、リンク要素を含むツールチップが表示されます。

Download now

スタンドアロン・デモ

トリガー要素からカーソルを移し、ツールチップの内部に含まれているリンクの上にカーソルを置くだけの十分な時間があります。ツールチップの設定で、この遅延をカスタマイズすることができます。

トリガに title 属性がある場合、title 属性は、マニュアルのツールチップをオーバーライドするため、マニュアル・ツールチップは表示されないことに注意してください。

HTML コード

私達は2つのもの：トリガ要素 - ダウンロードボタンとツールチップを持ちます。デフォルトで、このツールは、ツールチップをトリガ要素の右後に置くことを仮定します。ご覧の通り、ツールチップのコンテナとして何時もの DIV 要素を設定することで、前のデモの単純な title 属性とは対照的に、そこにはあらゆるものを含めることができます。

<!-- elements with tooltips -->
<!-- trigger element. a regular workable link -->
<a id="download_now">Download now</a>
 
<!-- tooltip element -->
<div class="tooltip">
 
  <img src="/media/img/title/eye.png" alt="Flying screens"
       style="float:left; margin:0 15px 20px 0" />
 
  <table style="margin:0">
    <tr>
      <td class="label">File</td>
      <td>flowplayer-3.2.7.zip</td>
    </tr>
    <tr>
      <td class="label">Version</td>
      <td>2011-03-03</td>
    </tr>
    <tr>
      <td class="label">Size</td>
      <td>112 kB</td>
    </tr>
    <tr>
      <td class="label">OS</td>
      <td>all</td>
    </tr>
  </table>
 
  <a href="/release-notes">What's new in 3.2</a>
</div>

CSS コード

ツールチップは、次によりスタイルが設定されています。この例では、black-arrowed 背景画像を使用しています。ここで注目すべき重要な点は、ツールチップを "skinning" する場合、CSSのすべてのパワーを持っているということです。バックグラウンドの設定、色、罫線やフォントなどを変更することができます。

/* trigger button */
#download_now {
  background:transparent url(/media/img/downloadnow.png) no-repeat scroll 0 0;
  display:block;
  height:44px;
  margin: 0 auto;
  margin-bottom:30px;
  overflow:hidden;
  text-indent:-999em;
  width:159px;
  cursor:pointer;
}

/* mouseover state */
#download_now:hover {
  background-position:0 -44px;
}

/* clicked state */
#download_now:focus {
  background-position:0 -88px;
}

/* tooltip styling */
.tooltip {
  display:none;
  background:url(/media/img/tooltip/black_arrow_big.png);
  height:163px;
  padding:40px 30px 10px 30px;
  width:310px;
  font-size:11px;
  color:#fff;
}

/* a .label element inside tooltip */
.tooltip .label {
  color:yellow;
  width:35px;
}

.tooltip a {
  color:#ad4;
  font-size:11px;
  font-weight:bold;
}

JavaScript コード

#download_now セレクタでトリガ要素を選択します。 ID の代わりにクラス名を使用することを選択した場合、ページから複数のトリガを選択することができ、そのすべてはツールチップとしてトリガの後 に配置されている要素を使用します。

	$("#download_now").tooltip({ effect: 'slide'});

注: スライド効果は、標準の jQuery ツール・ディストリビューションには含まれていません。この効果が含まれる custom combination をダウンロードする必要があります。