メッセージボックスが「ホバー」されたときにツールチップを表示するこのコードがあります。すべてのメッセージ ボックスは、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();
}
);
これは #info と呼ばれるチャットボックス、ボックス、およびツールチップへの私の 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;
}
私の問題は、チャットボックスの制限を超えると、ツールチップがチャットボックスの div によって切り取られることです。ここに jsfiddle があります: http://jsfiddle.net/Ifalcao/k9Yrc/2/
チャットボックス div のオーバーフロー ルールが存在する必要があります。そうしないと、メッセージ ボックスが多数ある場合、チャットボックスの制限を超えてしまいます。( http://jsfiddle.net/Ifalcao/URBDE ) チャットボックス内にメッセージボックスが必要ですが、チャットボックス外にあるメッセージボックスのツールチップが必要です。
前もって感謝します。