Question

私はこのコードをメッセージボックスが "ホバリング"されているときにツールチップとして表示させます。すべてのメッセージボックスはチャットボックスと呼ばれる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の限界を通過したときにツールチップがchatbox div要素によって遮断されていることである

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


} 

#info呼ばchatbox、ボックスやツールヒントに私のCSSコードです。 ここにはjsfiddleがあります：http://jsfiddle.net/Ifalcao/k9Yrc/2/

チャットボックスdivのオーバーフロールールが存在する必要があります。そうでなければ、メッセージボックスが多数ある場合、チャットボックスの制限を超えます。 （http://jsfiddle.net/Ifalcao/URBDE）チャットボックス内のメッセージボックスが必要ですが、チャットボックス外のメッセージボックスのツールチップが必要です。

ありがとうございます。

Answer 1

#chatbox divからoverflow-y:auto;ルールを削除すると、ツールチップが完全に表示されます。あなたがHTMLやjsFiddleを投稿することができます

jsFiddle example

Answer 2

はoverflow: visible;