CSSだけでツールチップを実現する方法

実行例

以下の文字にマウスポインタを重ねることで、実行例を確認できます。

サンプルコード

セレクタに:hover擬似クラスと:after擬似要素を指定することで、マウスポインタが要素上にあるときに、対象とする要素の後に内容が追加されるようになります。そしてその内容としてcontent属性でattr (属性名) を指定することで、その要素の属性値が表示されることになります。

<style type="text/css">

#tooltip a:hover {
    /* 位置 */
    position: relative;
}
#tooltip a:hover:after {
    content: attr(href);

    /* 位置 */
    position: absolute;
    left: 0;
    top: 32px;
    z-index: 1;

    /* 文字 */
    font-weight: normal;
    color: black;
    white-space: nowrap;

    /* 背景 */
    background-color: white;
    padding: 3px;
    border: 1px silver solid;
    border-radius: 3px;
    box-shadow: 1px 1px 3px silver;
}
</style>

<div id="tooltip">
    <ul>
        <li><a href="http://www.google.com/">Google</a></li>
        <li><a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a></li>
    </ul>
</div>

関連ページ

HTMLの情報サイトから、まとめて検索