好吧所以我用.appendTo来解决溢出问题:隐藏所以我的整个工具提示会显示在包含div之外。但是,它会在项目悬停后将工具提示锁定到位。如何清除.appendTo以隐藏工具提示。
$(this).hover(function(){
var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
$(this).children('.browse-tip').css({top: -40, left: pos.left - pos.width / 2});
$(this).children('.browse-tip').show();
$(this).children('.browse-tip').appendTo('#browse_wrap');
},function() {
$(this).children('.browse-tip').hide();
});
答案 0 :(得分:0)
事物的整体结构使你的工作充满挑战。我建议你有一个独立的元素,你可以在需要的时候在页面上翻转,并在显示之前将相关信息放入其中:
<div id="popup"></div>
<style>
#popup {
position: absolute;
display: none;
z-index: 999999;
width: 220px;
height: 200px;
}
#popup .browse-tip {
display: block;
}
</style>
<script>
$(this).hoverIntent(function(){
var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
$(this).children('.browse-tip').clone().appendTo("#popup");
$("#popup").css({top: pos.top-40, left: pos.left - pos.width / 2});
$("#popup").show();
return true;
},function() {
$("#popup").hide().children().remove();
return false;
});
</script>