मेरे टूलटिप को डिवी कंटेनर

Question

द्वारा काट दिया गया है। मेरे पास यह कोड है जब एक संदेश बॉक्स "hovered" होता है तो टूलटिप दिखाई देता है। सभी संदेश बॉक्स चैटबॉक्स नामक एक 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, बॉक्स और टूलटिप करने के लिए अपने सीएसएस कोड कहा जाता है #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; 


} 

मेरे समस्या यह है कि टूलटिप chatbox div से कट जाता है जब chatbox की सीमा पार जाते हैं। यहां एक jsfiddle है: http://jsfiddle.net/Ifalcao/k9Yrc/2/

चैटबॉक्स div में ओवरफ़्लो नियम मौजूद होना चाहिए, अन्यथा यदि मेरे पास कई संदेश बॉक्स हैं, तो वे चैटबॉक्स की सीमा पारित करेंगे। (http://jsfiddle.net/Ifalcao/URBDE) मुझे चैटबॉक्स के अंदर संदेश बॉक्स की आवश्यकता है लेकिन चैटबॉक्स के बाहर संदेश बॉक्स के टूलटिप्स की आवश्यकता है।

अग्रिम धन्यवाद।

Answer 1

#chatbox div से नियम हटाएं और टूलटिप पूरी तरह से दिखाई दे रहा है।

jsFiddle example

Answer 2

आप HTML और एक jsFiddle पोस्ट कर सकते हैं overflow: visible;