0

これらのツールチップを正しく表示するには? オーバーフローが表示されると問題は解決しますが、使用できません。そうしないと、他の要素が div から出てきます。の解き方？HTML:

<div id="test">
<a title='Sample tooltip' class='tooltip'>Test</a>
<br/>
<a title='Sample tooltip' class='tooltip'>Test</a>
<br/>
<a title='Sample tooltip' class='tooltip'>Test</a>
</div>

CSS:

#test{
width: 80px;
height: 50px;
border: 1px solid black;
margin: 0 auto;
margin-top: 150px;
overflow: auto;
}
.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(title);
display:block;
left:50%;
padding:5px 15px;
position:absolute;
white-space:nowrap;
z-index:98
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:75%;
position:absolute;
z-index:99
}

http://jsfiddle.net/6JeRU/1

4

2 に答える 2

0

新しいクリアフィックスを試しましたか?

http://nicolasgallagher.com/micro-clearfix-hack/

于 2013-08-11T16:35:36.880 に答える
0

コンテナの divが必要heightですか? #testそれを取り出して設定すると、overflow:visible完全に機能します：

http://jsfiddle.net/shaunp/6JeRU/4/

#test{
    width: 80px;
    /* no height */
    border: 1px solid black;
    margin: 0 auto;
    margin-top: 150px;
    overflow: visible;
}
于 2013-08-11T15:43:45.520 に答える