Question

Tôi có mã này để xuất hiện chú giải công cụ khi hộp thư được "di chuột". Tất cả các hộp tin nhắn nằm bên trong một div gọi là chatbox.

$('.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(); 
    } 
    ); 

Đây là mã css của tôi vào chatbox, hộp và tooltip gọi #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; 


} 

Vấn đề của tôi là tooltip được cắt đứt bởi div chatbox khi vượt qua giới hạn của chatbox. Đây là một jsfiddle: http://jsfiddle.net/Ifalcao/k9Yrc/2/

Quy tắc tràn trong div hộp trò chuyện phải tồn tại, nếu không tôi có nhiều hộp tin nhắn, chúng sẽ vượt quá giới hạn của hộp trò chuyện. (http://jsfiddle.net/Ifalcao/URBDE) Tôi cần các hộp thông báo bên trong hộp trò chuyện nhưng các chú giải công cụ của các hộp tin nhắn bên ngoài hộp trò chuyện.

Xin cảm ơn trước.

Answer 1

Xóa quy tắc overflow-y:auto; khỏi số #chatbox div và chú giải công cụ hoàn toàn hiển thị.

jsFiddle example

Answer 2

thêm trong tooltip css như overflow: visible;