ツールチップ(吹き出し)を表示する方法
テキストエリアなどにフォーカスした時だけでなく、ラジオボタンやセレクトボックスに対してもツールチップを付けたい場合もありますよね。
そんな時はマウスオーバーで表示させたら楽ちんじゃないかしらと考えた方法です。
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タグにしてください。