abbr の title 値を CSS でポップアップ

非対応ブラウザ: 4.x

折角、caramel*vanila の lomo さんが、前のエントリー（略語に振り回される今日この頃）にフォローアップして下さったこともあるので、僕の方でもちょっとだけ＋αをつけてみます。

略語に対してつける <abbr> 要素には、その原語なり原表記なりを title 属性の値に記述するのが普通です。モダンブラウザのデフォルト設定なら、<abbr> で括られた個所にマウスを乗せると、title 属性の値がツールチップの形で表示されます。

でも、ツールチップでは文字が小さくて見にくいですし、またマウスを乗せない限りは、何の略語であるのかが、結局わからないままです。そこで、その title 属性値（つまり原語）を CSS だけを使ってWebページ上に表示してみましょう。

原語（title 属性値）を括弧で括って略語の後に表示

:after 擬似要素を使うので、この方法だと残念ながら IE（バージョン7 を含む）には適用されません。なお、CSS で書き出した content の内容は、Firefox, Safari では選択・コピペ不可ですが、Opera では選択・コピペができるようになってます。

• HTML

abbr:after {

content: "（" attr(title) "）";
color: #4ABA4A; /* 一応、書き出された部分がわかりやすいように、ここでは色づけしておきます */

}

マウスオーバーで原語（title 属性値）を表示

今度は :hover の後に、:after 擬似要素を持ってくるという、ちょっとアクロバティックな合わせワザ。以下の "CSS" の部分にマウスを乗せてみてください。title 属性値が表示されるはずです。

• CSS

abbr {

cursor: help;

}
abbr:hover:after {

margin: auto 2px;
border: 1px #333 solid;
content: attr(title) " の略。";
background: #E3CFA6;

}

IE で :before, :after が実装されていないのが、返すがえすも遺憾ですね。

追記（2006-11-27）

略語を示す <abbr> とは別に、頭字語を示す <acronym> という要素がありますが（現行規格では "HTML" や "CSS" は、むしろこの acronym の方がより適切）、実はこの acronym 要素、XHTML 2.0 では abbr 要素に一本化されて廃止される見込みです。つい、無前提に頭字語に abbr 要素を使ってしまっていますが、実はそういう背景がありますので、ご了承くださいませ。