CSS で tooltip

CSS HTML

http://d.hatena.ne.jp/hkn/20100710/1278751747 に触発されて自分でも書いてみた。ほとんどパクりで違うところは position を使って位置指定をしているところくらい。

この話題ってたぶん昔からあるんだろうけど自分で書いたのを含めて cool だと思える方法が見つからない -> google:css tooltip 。 hover している位置、つまり mouse の座標を使えたらいいのにとか思っちゃう。根っこはたぶん CSS の記述力に期待しすぎとかそういうアレ。

以下 source の抜粋。

  <ul>
    <li><a href="" title="hoge">foo</a></li>
    <li><a href="" title="moge">bar</a></li>
    <li><a href="" title="sage">buz</a></li>
  </ul>

li {
    position: relative;
}

a:hover:after {
    content: attr(title);
    display: block;

    position: absolute;
    top: 12px;
    left: 24px;

    font-size: 80%;
    text-decoration: none;

    color: black;
    background-color: #f5f5dc;  /* beige */

    padding: 2px;
    border: 1px solid black;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
}