내 도구 설명이 div 컨테이너에 의해 잘려져 있습니다.

Question

메시지 상자가 "hovered"일 때 툴팁을 표시하는 코드가 있습니다. 모든 메시지 상자는 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(); 
    } 
    ); 

이것은 chatbox, 상자와 도구 설명에 내 CSS 코드는

#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; 


} 

내 문제가 chatbox의 한계를 통과 할 때 툴팁이 chatbox div에 의해 차단되어 있다는 점이다 #info이라고합니다. 다음은 jsfiddle입니다. http://jsfiddle.net/Ifalcao/k9Yrc/2/

채팅 상자 div의 오버 플로우 규칙이 있어야합니다. 그렇지 않으면 많은 메시지 상자가있는 경우 채팅 상자의 한도를 초과합니다. (http://jsfiddle.net/Ifalcao/URBDE) 나는 chatbox 안에 메시지 박스가 필요하지만 chatbox 밖에있는 메세지 박스의 툴 팁이 필요하다.

미리 감사드립니다.

Answer 1

#chatbox div에서 overflow-y:auto; 규칙을 삭제하면 툴팁이 완전히 보입니다. 당신은 HTML과 jsFiddle을 게시 할 수

jsFiddle example

Answer 2

는 overflow: visible;