我的工具提示被div容器切断了

时间:2013-04-18 18:55:34

标签: jquery css overflow jquery-tooltip

我有这个代码,当消息框“悬停”时,它会显示为工具提示。所有消息框都在一个名为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)我需要聊天框内的消息框,但是聊天框外面的消息框的工具提示。

提前致谢。

2 个答案:

答案 0 :(得分:2)

overflow-y:auto; div中删除#chatbox规则,工具提示完全可见。

<强> jsFiddle example

答案 1 :(得分:0)

将工具提示css添加为overflow: visible;