CSSだけでツールチップを表示する

リンクテキストやイメージにツールチップを表示したいことがあります。簡単に実現する方法として、「title」属性を使う方法があります。

しかし、内容が長く途中で改行したくてもできません。(Internet Explorerの場合は、「
」で改行表示されます)

そこで、簡易的ですがCSSだけでツールチップを表示するサンプルを紹介します。

<Sample 1>

ここCSSだけで
ツールチップを表示。
」にマウスポインタを合わせると、ツールチップが表示されます。

<(X)HTML Code>

<CSS Code>

<動作確認>

Windows
  • ○ Internet Explorer 5 / 5.5 / 6 /7
  • ○ Firefox 3.1β2
  • ○ Safari 3
  • ○ Google Chrome
  • ○ Opera 9.63
Mac
  • ○ Safari 3
  • ○ Firefox 3
  • × Internet Explorer 5.23
  • ○ Opera 9.63

<Sample 2>

ここCSSだけで
ツールチップを表示。
」にマウスポインタを合わせると、ツールチップが表示されます。

ツールチップの背景を半透明にしてみました。