jquery - 我的工具提示被 div 元素的限制切断了

Question

当消息框“悬停”时，我需要显示一个工具提示。所有消息框都在一个名为 chatbox 的 div 中。我的问题是当通过聊天框的限制时，工具提示被聊天框 div 截断。这是一个jsfiddle http://jsfiddle.net/Ifalcao/k9Yrc/2。

聊天框 div 中的溢出规则必须存在，否则如果我有很多消息框，它们将超过聊天框的限制（http://jsfiddle.net/Ifalcao/URBDE）。

我需要聊天框内的消息框，但需要聊天框外消息框的工具提示。

请帮帮我。

提前致谢。

Answer 1

这段代码似乎可以在您的小提琴中使用-我将工具提示设为“body”的子项，并将其放置在框旁边-这是小提琴：http: //jsfiddle.net/k9Yrc/8/

$('.box').hover(function(){
                var boxLeft = $(this).offset().left;
                var boxTop = $(this).offset().top;
                var htmltooltip = '<div id="info" class="shadow">';
                htmltooltip += '<h4>Label info</h4>';
                htmltooltip += '<img src="images/defaultphoto.gif"/>';
                htmltooltip += '</div>';
                $('body').append(htmltooltip).children('#info').hide().fadeIn(400).css('left', boxLeft - 150).css('top', boxTop + 100);
                }, function() {
                    $('#info').remove();
                    }
            );