結果 Oh! Life

懲りずに書いてみたりする結果オーライな日記



20093月10

完全CSSオンリーのツールチップテスト

ウェブ@海水業界 エイジ 09:11

先日の CSSで三角形を作る→ツールチップへの応用 の実験がなかなか面白かったので、調子に乗って今度はJavaScriptを使わない完全CSSオンリーのツールチップのテストをおこなってみました。

サンプルページ ← クリックして別ウィンドウでご覧ください
詳細は後記しますが、現状で Safari、Chrome、Opera 以外のブラウザでは、ツールチップのポインタ部(突起)が崩れたり未表示となります。(但しツールチップ自体は表示される)
尚、IE 6 に至っては何故かアンカー自体が消失してるかも(汗)

但し前置きしておきますが、これは恐らく実用には耐えない仕様かも知れません(汗)
と言うのも、結果的に SEO スパム的な手法(?)になっちゃうので、よい子の皆さんは絶対に真似しない方が賢明かと思いますです。

と言うわけで、「あくまでも実装可能なアイデアのひとつ」としてご覧ください。

まず、以下のようなソースを用意しました。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>CSS TEST</title>
<style type="text/css">
<!--
a.tooltip {
  position:relative;
  text-decoration:none;
}
a.tooltip:hover:after {
  content:'';
  position:absolute;
  z-index:1;
  left:10px;
  top:20px;
  display:block;
  width:0;
  height:0;
  border-top:0;
  border-right:solid 10px transparent;
  border-bottom:solid 10px #369;
  border-left:0;
}
a.tooltip span {
  position:absolute;
  z-index:2;
  left:0;
  top:30px;
  display:none;
  width:120px;
  padding:4px 6px;
  line-height:1.1;
  font-size:13px;
  color:#369;
  background:#cde;
  border:solid 1px #369;
}
html>body a.tooltip span {
  width:108px;
}
a.tooltip:hover span {
  display:block;
}
a.tooltip span:before {
  content:'';
  position:absolute;
  left:10px;
  top:-9px;
  display:block;
  width:0;
  height:0;
  border-top:0;
  border-right:solid 9px transparent;
  border-bottom:solid 9px #cde;
  border-left:0;
}
-->
</style>
</head>
<body>
  <p>
    <a href="#" class="tooltip">
      ここ
      <span>このツールチップはCSSのみで実現しています</span>
    </a>
  </p>
</body>
</html>

このテストは、予めツールチップのテキストをアンカーに忍ばせておいて、マウスオーバーに応じて CSS の疑似クラス(:hover)で可視制御をおこなうというものです。要するに、ツールチップ用テキストもアンカーテキストもどちらもアンカーに入れちゃう形となります。

また前回同様、ツールチップのポインタ(突起)も再現する訳ですが、この部分を CSS の疑似要素(:after, :before)で再現することにしました。これにより無駄にタグを使うことなく、必要最小限のマークアップでポインタ部が実現されます。
尚、この実験ソースでは :before:after を使い分けていますが、いずれも絶対配置してるので、各々でどちらを使っても通用すると思います。

ちなみに border-radius (角丸)については今回は目的外として省略しました。

さて、このソースをツールチップも含めポインタ(突起)まで全てまともにレンダリングできたのは、以下のブラウザだけでした。

CSSの疑似要素でツールチップのポインタが実装できたブラウザ

最近、Safari はレベル高いなぁ。。。かなり高評価ですよ。
Chrome もさすが Google のクオリティを受け継いでいます。
Opera は期待してなかっただけに感動!!

しかし。。。 Firefox は 2.0 も 3.0 もポインタは全滅でした!
原因を調べてみたら、どうやら疑似要素に対しての絶対配置(position:absolute;)が処理できていないようでした。
さらに調べてみたら、CSS2 の仕様の時点では疑似要素に対しての position や float は確かに無視すべきとあり、その制限が無くなったのは CSS2.1 になってからのようです。
と言うわけで、現時点の Firefox は CSS2に準拠していると思われます。

また、Firefox が全滅と言うことで、Netscape 等の Gecko 系も全滅です。

IE は。。。ま、疑似要素自体できない子なので、言うに及ばず(苦笑)

ただ、いずれのブラウザでもツールチップ自体は正常に表示される(IE 6 はダメっぽい?)ので、ポインタ(突起)さえ諦めればこれはこれでツールチップのアイデアのひとつとして成立するかな?と思います。

さて、この完全CSSツールチップですが、アイデア自体なかなかのもんだと思うのですが、やっぱり実用には無茶ですかね?
でも完全非表示ではなくて、マウスオーバーで表示されるから、実はセーフなのかな?
とは言えこれがセーフなら、堂々とキーワードをアンカーに詰め込めちゃいますね(爆)
ま、僕はやりませんけど。

あとは人柱さんに期待してます。

おまけ

お時間とご興味のある方は、以下のサンプルもお試しください。
上記の優秀なブラウザなら、うまく解釈されるはずです♪

サンプルページ2

あとはこれでブラウザデフォルトのツールチップが消せたら完璧なんだけど。。。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>CSS TEST 2</title>
<style type="text/css">
<!--
a.tooltip {
  position:relative;
  text-decoration:none;
}
a.tooltip[title]:hover:after {
  content:attr(title);
  position:absolute;
  left:0;
  top:60px;
  display:block;
  width:108px;
  padding:4px 6px;
  line-height:1.1;
  font-size:13px;
  color:#cde;
  background:#369;
}
a.tooltip[title]:hover:before {
  content:'';
  position:absolute;
  left:20px;
  top:50px;
  display:block;
  width:0;
  height:0;
  border-top:0;
  border-right:solid 10px transparent;
  border-bottom:solid 10px #369;
  border-left:0;
}
-->
</style>
</head>
<body>
  <p>
    <a href="#" class="tooltip"
     title="このツールチップはCSSのみで実現しています">ここ</a>
  </p>
</body>
</html>

これはさすがにまだ早いかな。
でもこれが一番スッキリしてる(笑)

このエントリーをはてなブックマークに追加

こちらのエントリーもどうぞ♪


コメントとトラックバック

コメント及びトラックバックはありません

コメントフォーム



コンテンツ

スペクトラ LEDスペクトラ解説