CSSでツールチップを実装しています。
フォームの説明用に使っているのですが、マウスオーバーした時に画像のように正確に表示されません。
（赤枠がツールチップ部分です）
フォームのCSSはdlタグを使っています。
dl{overflow: hidden;position: relative; border: 1px solid #CCCCCC;}
dt{float: left; width: 100px;background-color: #eeeeee; padding: 5px;}
dd{float: left;width: 100px;margin: 0px;padding: 5px;}
dlの「overflow: hidden;position: relative;」を削除すればツールチップの全てが表示されるので、
これが原因だと思います。しかし、dl・dt・ddタグで横並びしたいので削除せずに解決策を探しています。
CSSツールチップは以下で説明しているソースを利用しています。
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/
わかりづらいかもしれませんが、解決方法をご存じの方は教えて下さい。
※IE7、Firefox3.5.7で同じ現象になります。
※z-indexを指定しても変わりませんでした。
No.1
200
42
60pt
dt / dd の float 指定により、border: 1px solid #CCCCCC; が一本線になってしまうため
overflow: hidden を使って回避しているのだと思いますが、
「overflow: hidden」は「領域からはみ出たものは表示しない」という指定なので、
dl に指定した場合、dl の領域からはみ出すものは表示されません。
HTML / CSS のコード全体が無い＆レイアウトの詳細が分からないため
一般的な改善策しか提示することはできませんが、解決法としては以下の２パターンが考えられます。
dt に上下 padding がある（上下に間隔を設けたい）ことから、前者になると思います。
（inline 要素には上下の padding を設定しても確保されないため）
clearfix は応用範囲の広い tips なので、これを機会に覚えると良いと思います。
※「clearfix」で検索をすると多くの解説ページが出てきます。
rouge_2008
2010/02/11 14:35:48
2
1
1
1
2
56
48
yuuya-553
ありがとうございます。「overflow: hidden」に関する認識不足でした。大変参考になりました。