我有这个代码,当消息框“悬停”时,它会显示为工具提示。所有消息框都在一个名为chatbox的div中。
$('.box').hover(function(){
var htmltooltip = '<div id="info" class="shadow">';
htmltooltip += '<h4>Label info</h4>';
htmltooltip += '<img src="images/defaultphoto.gif"/>';
htmltooltip += '</div>';
$(this).append(htmltooltip).children('#info').hide().fadeIn(400).css('left', -150);
}, function() {
$('#info').remove();
}
);
这是我在聊天框,框和工具提示中的css代码,名为#info
#chatbox {
position: absolute;
overflow-y:auto;
top:40%;
left:50%;
background:#fff;
height:80%;
width:550px;
border:3px solid black;
}
.box{
width:90%;
height:auto;
margin:5px 20px 0px 0px;
border:3px solid #918750;
float:left;
cursor: pointer;
}
#info{
position:absolute;
display:block;
background:#7F7777;
width:300px;
padding-bottom: 0.5em;
z-index:25;
}
我的问题是,当通过聊天框的限制时,聊天框div会截断工具提示。 这是一个jsfiddle:http://jsfiddle.net/Ifalcao/k9Yrc/2/
聊天框div中的溢出规则必须存在,否则如果我有许多消息框,它们将通过聊天框的限制。 (http://jsfiddle.net/Ifalcao/URBDE)我需要聊天框内的消息框,但是聊天框外面的消息框的工具提示。
提前致谢。
答案 0 :(得分:2)
从overflow-y:auto;
div中删除#chatbox
规则,工具提示完全可见。
<强> jsFiddle example 强>
答案 1 :(得分:0)
将工具提示css添加为overflow: visible;