ツールチップ(ポップアップヘルプ)を改良してみた。

2007年4月24日 14:41

えぇ、以前、CSSだけでポップアップヘルプを実現するというエントリーを書きましたが、若干IEなどで表示がうまくいかないなど問題があったのでそれを改良してみました。

サンプルはこんな感じ。

サンプル

------------------------------------------------------------------------------
------------------------------------------------------------------------------

▼EntryMore▼

サンプルHTMLコード

サンプルCSSコード

設定はごく簡単です。a要素にclassを指定し、「toolTip」を適用するだけ。
そして、ポップアップさせたい文言を<span></span>の中に書いてください。
通常時はspan要素内の文字は隠れていて、該当のリンクにマウスオーバーしたときだけ説明文が表示されます。

内容としては、a:hover spanで、:hover時のみにスタイルを適用する点です。
ただ、以前のエントリーでは、表示位置によりポップアップ部分が文字の下に入り込んでしまう(下の文章がポップアップの文章にかぶる)状態になってしまっていたのでそれを修正した形です。

修正内容としては、a:hover,a:hover spanの両方にz-indexを設定した点。
なぜか、a:hoverにz-indexを設定しないと文字の下に入り込んでしまうようです。(IE7、6)
また、同じ理由でvisibilityも同時にvisibleに設定しないと表示もおかしくなるようです。

参考コード

確か、heightとかzoomとかを設定すると入るスイッチのようなものが
IEにはあるとかで、そのあたりのせいなんですかね。
ちなみにFirefoxではIEのような現象はありませんでした。

※動作チェック:Firefox2.0.3, IE7, IE6

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/38

トラックバック

a:hoverでz-indexを変えて重なりの入れ替えをIEにも対応させてみた

CSSで、a:hoverによるz-indexを変えてレイヤーの重なりを制御しようとしたのですが、IEにハマりました。特にIE7に。 まず最初に試したのが下...

by我流天性 - がらくた屋 2007年5月 9日 02:32

コメント

1 - 我流@CGFM さん

はじめまして、我流@CGFMと言います。
2重トラックバック送信してしまい、失礼しました。


IE6だと、z-indexを指定してないとHTMLの要素順に重ねてしまうみたいですね。

ツールチップのサンプル、参考にさせて頂きます。

2007年5月 9日 02:37

2 - えど さん

>>我流@CGFMさん
コメントとトラックバックありがとうございました(*'-')

z-indexに、というかIEにはほんと苦労させられます(-_-;
我流さんのサイトも拝見しました。

みんな同じように苦労してるんですね、IEにはw
今後、たまに訪問させて頂くのでよろしくです。

2007年5月 9日 10:05

3 - snow さん

はじめまして、snowと申します。

先日、仕事の関係でcssでツールチップを入れたいと思い、こちらで紹介されている物に似たソースを書いたのですが、クローラーがどうゆう評価をするのか?と思いコメントさせていただきました。

具体的には1ページ内に商品へのテキストリンクが数多くあり、その中の70~80個のテキストリンクにツールチップを指定してあります。
ツールチップの内容はそれぞれ50px角程度の画像と30~50文字程度のリンク先の商品説明です。
ユーザビリティのためにやっているのですが、悪い言い方をすると30~50文字×70~80個の隠しテキストがあるという扱いでスパム扱いになる可能性はあるのでしょうか?
不躾で申し訳ないのですが、何かご存知でしたらよろしくお願いします。

時々、のぞかせてもらいます^^

2008年10月16日 21:54

4 - えど Author Profile Pageさん

>>3 - snowさん
コメントありがとうございます。
コメントいただいた内容については、正直「分かりません」としか言えません。
分かるのはGoogleなどの各検索エンジンの会社だけでしょう。

ただ自分の意見としては、
こうしたユーザビリティを考慮したものについて
ペナルティを与えることはないんじゃないか、と思っています。

そもそもCSSの仕様定義されているものを使用し、
さらにユーザビリティに配慮した使い方をしているものを
ペナルティとしてしまうと、CSSの定義自体を否定することに
なってしまうのではないかな、と思っているからです。

また、Googleなどの企業が、
こういったものをペナルティとしてしまうほど
甘いチェックでクロールしていないだろう、とも思っています。

他のところで色々議論されていますが、
これといった明確な回答は出ていないように思います。
なので、最終的には自分で「大丈夫だ」と思えたら使う。
そうでないのなら使用を控えるしかないかなと思います。

2008年10月16日 23:54

5 - snow さん

えど さん

回答ありがとうございます。
確かにおっしゃるとおりですね。
ただ「大丈夫」とは思っているのですが、「だろう?」
が、ついてしまうところが悩みどころです。

今回は、ツールチップ内のテキストがボリューム的に大きかったので、伺わせてもらいました。ありがとうございました。

2008年10月18日 00:20

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。