jQueryでマウスオーバーしたらツールチップ(吹き出し)を表示する方法

ツールチップ(吹き出し)を表示する方法

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