一部のサイトで、リンクや引用部分にマウスカーソルを持っていくと title 属性や cite 属性がポップアップするところがあって、どうやってるの？スタイルシートでできる？と思っていたら、ようやくやり方がわかりました。

基本的にな方法としては、JavaScript とスタイルシートの組み合わせで実現するようです。ただ、ブラウザによって動作が違ってくるようで、簡単に実現するには ALIMIKA SATOMI さんのあれこれポップアップが手っ取り早いです。うちでも導入してみました。

書き換えたのは１箇所だけです。

this.requiredAttr = { 'a' : 'title'}; を
this.requiredAttr = { 'a' : 'title', 'blockquote' : 'cite', , 'blockquote' : 'title' }; にしました。

使うとどうなるかというと、こんな感じ。(下記の引用部分にカーソルを持っていってください。)

ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所（要素）の情報（属性値）あれこれをポップアップに出す、 JavaScript と CSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。

多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事（笑）

Trackback Ping URL(U)