1265854740 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を指定しても変わりませんでした。

回答の条件
  • 1人2回まで
  • 登録:2010/02/11 11:19:01
  • 終了:2010/02/11 15:34:08

回答(3件)

id:kaz No.1

kaz回答回数200ベストアンサー獲得回数422010/02/11 15:30:51

ポイント60pt

dt / dd の float 指定により、border: 1px solid #CCCCCC; が一本線になってしまうため

overflow: hidden を使って回避しているのだと思いますが、

「overflow: hidden」は「領域からはみ出たものは表示しない」という指定なので、

dl に指定した場合、dl の領域からはみ出すものは表示されません。


HTML / CSS のコード全体が無い&レイアウトの詳細が分からないため

一般的な改善策しか提示することはできませんが、解決法としては以下の2パターンが考えられます。


  • overflow: hidden ではなく、dl に clearfix を使う等、別の方法で一本線を回避する
  • dl の横並びを float ではなく display: inline; など別の方法で行う

dt に上下 padding がある(上下に間隔を設けたい)ことから、前者になると思います。

(inline 要素には上下の padding を設定しても確保されないため)

clearfix は応用範囲の広い tips なので、これを機会に覚えると良いと思います。

※「clearfix」で検索をすると多くの解説ページが出てきます。

id:k27w

ありがとうございます。「overflow: hidden」に関する認識不足でした。大変参考になりました。

2010/02/11 15:33:57

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 yuuya-553 11 1 0 2010-02-11 12:36:18
2 yuuya-553 11 1 0 2010-02-11 12:38:03
  • id:rouge_2008
    Firefoxではなんとかなりましたが、IE7では今ひとつ駄目でした。
    ツールチップの表示幅を大きくして、最大でも2行程度にするのは無理でしょうか?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません