<abbr>
    堀北真希ちゃん
    <span class="delimiter">(</span>
        <span class="remark">東京都清瀬市出身のアイドル女優。制作者にとってのいわゆる<em>俺の嫁</em>。</span>
        <span class="delimiter">)</span>
    </abbr>

ここでは、ポップアップさせたい注釈の直前直後に、括弧を要素としてマークアップしております。CSSに対応していない環境などで閲覧したときに可読性を損ねる恐れがあるため、CSS対応環境では表示させない括弧で注釈を囲んでいる訳です。

メッセージをHTML内に埋め込むサンプルマークアップはここまで

この方法は

注釈をマークアップ出来る。特に画像などを<img>要素で埋め込んでポップアップさせる事も可能
ポップアップの際にブラウザのデフォルトのツールティップが表示されない
CSSに対応していない環境でも注釈を提供出来る
インターネットエクスプローラ 7.0でも対応可能(6.0はダメ)
- インターネットエクスプローラ 6.0が<abbr>要素を認識しないからではなく、:hover 擬似クラスを絡めたセレクタが正しく扱われないのが原因です。

などの利点がありますが、マークアップは若干面倒かも知れません。

本頁の目次

上記のようなHTMLに於いて、<abbr>要素がポイントされたときにメッセージを表示させるCSSは以下の通りです。

メッセージをHTML内に埋め込む場合のポップアップメッセージを実現するスタイル定義を読み飛ばす

abbr {
    position: relative;
    top: 0;
    left: 0;
    }

span.delimiter,
span.remark {
    display: none;
    }

abbr:hover>span.remark {
    display: block;
    position: absolute;
    top: 1.0em;
    left: 1.0em;
    width: 12em;
    margin: 0.5em;
    padding: 0.5em;
    border: #ccc solid 2px;
    background: #efe;
    color: #000;
    font-size: 80%;
    line-height: 1.2em;
    z-index: 2;
    }

メッセージをHTML内に埋め込む場合のポップアップメッセージを実現するスタイル定義はここまで

大したカラクリではありませんが、

通常は、CSS非対応向けの区切り符号である要素と、ポップアップさせたい注釈である要素を非表示にしておきます。
<abbr>要素がポイントされたら、直下の内容となっている要素をその近くにブロックレヴェル要素として表示させる

と言うものです。

CSSに於いて工夫すべきところ。

▲記事先頭
△前項目
▽次項目

ここで、単純に表示させても良いのですが、幾つか工夫が必要になります。

表示位置の指定方法

普通に表示位置を固定するには、<abbr>要素がポイントされた際の直下の要素について、position: relative プロパティを当てればよいと思われるかも知れません。

ですが、position: relative プロパティだと該当する要素が本来位置すべき空間が空いてしまいます。

position: relative プロパティを当てられた要素は一旦本来あるべき位置に描画されたものが top プロパティや left プロパティなどで位置をずらし、跡を残してしまう仕様となっております。

このため、position: absolute プロパティを当てる必要があります。

しかし、そのまま単純に position: absolute プロパティを当ててしまうと、何処に表示されるか分からなくなるため、親要素の<abbr>要素で予め position: relative プロパティを当てる事でデフォルトの表示原点を変更する必要があると言う訳です。

ポップアップの重なり方

この方法を単純に行うと、表示されるポップアップメッセージが後続のテキストの下に表示されてしまいます。

なぜなら、後続のテキストは常に上から重ねられる形にレンダリングされるからです。

後続テキストの下敷きにされてしまうのを防ぐため、<abbr>要素がポイントされたときの注釈要素には z-index プロパティに正の値を指定して後続テキストより上に重なるようにします。

実際にはインターネットエクスプローラなどで巧く行かない場合があるようです。

尚、<abbr>要素がポイントされたときの注釈要素のスタイル定義では、直下セレクタにしておりますが、これは<abbr>要素の下に更に<abbr>要素があった場合、ポイントの有無にかかわらずそれも表示されてしまう事になるため、直下要素のみに限定したものです。

インターネットエクスプローラ 6.0まででは、:hover 擬似クラスを絡めたセレクタが正しく扱われないため、このCSSは役には立たず、従ってIE 6.0が認識出来ない直下セレクタを用いても問題にはなりません。

本頁の目次

メッセージをtitle属性値とする方法。

▲記事先頭
△前項目
▽次項目

実際のサンプルは、title属性値をポップアップするCSSの公開サンプルで公開しております。

続いて、ポップアップさせたい注釈をtitle属性として記述する場合の方法です。

例えば、以下のようにポップアップさせたい項目を持つフレーズを<abbr>要素とし、そのtitle属性にポップアップさせたい注釈を記述しているとします。

メッセージをtitle属性値とするサンプルマークアップを読み飛ばす

<abbr title="東京都清瀬市出身のアイドル女優。制作者にとってのいわゆる&quot;俺の嫁&quot;。">堀北真希ちゃん</abbr>

メッセージをtitle属性値とするサンプルマークアップはここまで

この方法は記述は比較的簡単なのですが、何よりも、当該<abbr>要素がポイントされた際にウェブブラウザのデフォルトのツールティップも表示されてしまうと言う欠点があります。

もっとも、ツールティップは一定時間が経つと消えるようなので、長めのメッセージなど読んでいる途中で消えてしまいそうなものなどには良いかも知れません。

今のところデフォルトのツールティップを非表示にする各社共通の方法は存在しません。

また、この方法はインターネットエクスプローラでは 8.0以降でないと対応出来ません。

本頁の目次

title属性値であるメッセージをポップアップさせるCSS。

▲記事先頭
△前項目
▽次項目

上記のようなHTMLに於いて、<abbr>要素がポイントされたときにtitle属性値を表示させるCSSは以下の通りです。

title属性値であるメッセージをポップアップさせるCSSを読み飛ばす

abbr[title] {
    position: relative;
    top: 0;
    left: 0;
    }

abbr[title]:before {
    display: none;
    }

abbr[title]:hover:before {
    display: block;
    position: absolute;
    top: 1.0em;
    left: 1.0em;
    width: 12em;
    margin: 0.5em;
    padding: 0.5em;
    border: #ccc solid 2px;
    background: #efe;
    color: #000;
    font-size: 80%;
    line-height: 1.2em;
    content: attr(title);
    z-index: 2;
    }