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

カテゴリ:CSSテクニック 2007年4月24日 14:41

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

サンプルはこんな感じ。n

サンプル

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

▼EntryMore▼

サンプルHTMLコード

サンプルCSSコード

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

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

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

参考コード

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

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

この記事のカテゴリー一覧を見る⇒CSSテクニック

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

トラックバックURL

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

トラックバック

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

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

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

コメント

1 - 我流@CGFM さん

はじめまして、我流@CGFMと言います。n2重トラックバック送信してしまい、失礼しました。nIE6だと、z-indexを指定してないとHTMLの要素順に重ねてしまうみたいですね。nツールチップのサンプル、参考にさせて頂きます。

2007年5月 9日 02:37

2 - えど さん

>>我流@CGFMさんコメントとトラックバックありがとうございました(*'-')z-indexに、というかIEにはほんと苦労させられます(-_-;我流さんのサイトも拝見しました。nみんな同じように苦労してるんですね、IEにはwn今後、たまに訪問させて頂くのでよろしくです。

2007年5月 9日 10:05

3 - snow さん

はじめまして、snowと申します。n先日、仕事の関係でcssでツールチップを入れたいと思い、こちらで紹介されている物に似たソースを書いたのですが、クローラーがどうゆう評価をするのか?と思いコメントさせていただきました。n具体的には1ページ内に商品へのテキストリンクが数多くあり、その中の7080個のテキストリンクにツールチップを指定してあります。nツールチップの内容はそれぞれ50px角程度の画像と3050文字程度のリンク先の商品説明です。nユーザビリティのためにやっているのですが、悪い言い方をすると3050文字×7080個の隠しテキストがあるという扱いでスパム扱いになる可能性はあるのでしょうか?n不躾で申し訳ないのですが、何かご存知でしたらよろしくお願いします。n時々、のぞかせてもらいます^^

2008年10月16日 21:54

4 - えど Author Profile Pageさん

>>3 - snowさんコメントありがとうございます。nコメントいただいた内容については、正直「分かりません」としか言えません。n分かるのはGoogleなどの各検索エンジンの会社だけでしょう。nただ自分の意見としては、nこうしたユーザビリティを考慮したものについてペナルティを与えることはないんじゃないか、と思っています。nそもそもCSSの仕様定義されているものを使用し、nさらにユーザビリティに配慮した使い方をしているものをnペナルティとしてしまうと、CSSの定義自体を否定することになってしまうのではないかな、と思っているからです。nまた、Googleなどの企業が、nこういったものをペナルティとしてしまうほど甘いチェックでクロールしていないだろう、とも思っています。n他のところで色々議論されていますが、nこれといった明確な回答は出ていないように思います。nなので、最終的には自分で「大丈夫だ」と思えたら使う。nそうでないのなら使用を控えるしかないかなと思います。

2008年10月16日 23:54

5 - snow さん

えど さん回答ありがとうございます。n確かにおっしゃるとおりですね。nただ「大丈夫」とは思っているのですが、「だろう?」nが、ついてしまうところが悩みどころです。n今回は、ツールチップ内のテキストがボリューム的に大きかったので、伺わせてもらいました。ありがとうございました。

2008年10月18日 00:20