JavaScript + Ajax 実践サンプル集

バブルツールチップ

説明補足説明コードコメント投稿

このサンプルは、スタイルシートを使用してanchor要素のツールチップを表示しています。アンカーにマウスを移動すると、矢印付きのボックスで囲まれたツールチップが半透明で表示されます。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Bubble Tooltips</title>
<style type="text/css">
body{font: .75em Arial,sans-serif; background: #FFFFFF; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
    font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	  padding: 15px 0 0 0;
	  width:200px;
	  color: #993300;
    text-align: center;
	  filter: alpha(opacity:90);
	  KHTMLOpacity: 0.90;
	  MozOpacity: 0.90;
	  opacity: 0.90;
}
a.tt:hover span.top{
	  display: block;
	  padding: 30px 8px 0;
    background: url(images/tooltip/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	  display: block;
	  padding: 0 8px; 
	  background: url(images/tooltip/bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	  display: block;
	  padding:3px 8px 10px;
	  color: #548912;
    background: url(images/tooltip/bubble.gif) no-repeat bottom;
}
</style>
</head>
<body>

<div id="container">
    <h1>CSS Bubble Tooltips</h1>
    <p>
      このサンプルは、JavaScriptを一切使用しないでanchor要素のツールチップを表示します。<br />
      
      <a href="#" class="tt">このアンカー
         <span class="tooltip">
           <span class="top"></span>
           <span class="middle">このバブルツールチップはCSSを使用して表示しています！</span>
           <span class="bottom"></span>      
         </span>  
      </a> にマウスを移動すると矢印付きのボックスで囲まれたツールチップが表示されます。
      
    </p>
    
    <p>
    　このように
       <a href="#" class="tt">長いツールチップ
         <span class="tooltip">
           <span class="top"></span>
           <span class="middle">
            長いツールチップ<br />
            このツールチップは、anchor要素に
            3個のspan要素を挿入して表示しています。                        
           </span>
           <span class="bottom"></span>
         </span>
       </a> も表示することができます。    
    </p>
    
    <p>
      このテキスト上にツールチップが表示されても隠されないように
      CSSの特別なopacityを適用しています。
      このテキスト上にツールチップが表示されても隠されないように
      CSSの特別なopacityを適用しています。
      このテキスト上にツールチップが表示されても隠されないように
      CSSの特別なopacityを適用しています。
      このテキスト上にツールチップが表示されても隠されないように
      CSSの特別なopacityを適用しています。                  
    </p>
  
  </div>

</body>
</html>

このサンプルを編集して試してみる!

anchor要素にツールチップを表示するには、4個のspan要素を追加します。ツールチップは、middleのspan要素に記述します。ツールチップにヘッダーとフッターを表示するには、topとbottomのdiv要素にテキストを追加します。

このサンプルで使用しているイメージです。右ボタンをクリックしてダウンロードしてください。左のイメージがbubble.gif、右のイメージがbubble_filter.gifです。

<a href="#" class="tt">アンカー   
  <span class="tooltip">   
    <span class="top"></span>   
    <span class="middle">ここにツールチップを記述</span>   
    <span class="bottom"></span>         
  </span>     
</a>

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

バブルツールチップ