ツールチップ(吹き出し)を表示する方法
テキストエリアなどにフォーカスした時だけでなく、ラジオボタンやセレクトボックスに対してもツールチップを付けたい場合もありますよね。
そんな時はマウスオーバーで表示させたら楽ちんじゃないかしらと考えた方法です。
IE7でも吹き出しの三角は表示されませんが、表示は可能です。
デモページでは、対応するtdタグがマウスオーバーされた時にツールチップが表示されるようにしています。
tdではなくても、divや任意のクラス名でもOKです。
jQuery
$(function () { $('.tooltip').hide(); $('td').hover( function () { $(this).children('.tooltip').fadeIn('fast'); }, function () { $(this).children('.tooltip').fadeOut('fast'); }); });
html
tdタグの子要素に、tooltipというクラス名が付いているものがあれば、ツールチップとして表示されます。
<table> <tr> <th>テキストボックス</th> <td> <input type="text" name="text" /> <p class="tooltip">テキストボックスのツールチップ</p> </td> </tr> <tr> <th>チェックボックス</th> <td> <input id="c1" type="checkbox" name="check" /> <label for="c1">選択肢1</label> <input id="c2" type="checkbox" name="check" /> <label for="c2">選択肢2</label> <p class="tooltip">チェックボックスのツールチップ</p> </td> </tr> <tr> <th>ラジオボタン</th> <td> <input id="r1" type="radio" name="radio" /> <label for="r1">選択肢1</label> <input id="r2" type="radio" name="radio" /> <label for="r2">選択肢2</label> <p class="tooltip">ラジオボタンのツールチップ</p> </td> </tr> <tr> <th>セレクトボックス</th> <td> <select name="select"> <option value="選択肢1">選択肢1</option> <option value="選択肢2">選択肢2</option> <option value="選択肢3">選択肢3</option> </select> <p class="tooltip">セレクトボックスのツールチップセレクトボックスのツールチップ</p> </td> </tr> <tr> <th>テキストエリア</th> <td> <textarea rows="7" cols="30"></textarea> <p class="tooltip">テキストエリアのツールチップテキストエリアのツールチップ</p> </td> </tr> </table>
CSS
td { position:relative; } .tooltip { width:130px; padding:10px; font-size:12px; margin:-30px 0 0; background-color:#666; color:#fff; position:absolute; right:-160px; top: 50%; } .tooltip:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: rgba(102, 102, 102, 0); border-right-color: #5e5e5e; border-width: 8px; margin-top: -8px; }
要素にかぶせてツールチップ(キャプション)を表示する方法
マウスオーバーでツールチップ(キャプション)を表示する方法です。
中身はリンクやアイコンにしたりと、応用もききます。
画像の上に表示する場合は class=”inner” の中身をimgタグにしてください。