2012-09-11 17 views
0

這裏是我使用的顯示工具提示jquery的:移位的位置到上和離開對象

$(document).ready(function() { 
$(".toolTip").hover(
    function() { 
    var div_id = $(this).attr('id').split("_")[0]; 
    if($("#"+div_id).length){ 
      // 
    } 
    $(this).append(
    '<div class="toolTipWrapper">' 
     +$("#"+div_id).text() 
     +'</div>' 
    ); 
    this.width = $(this).width(); 
    //Get the HTML document width and height 
    var documentWidth = $(document).width(); 
    var documentHeight = $(document).height(); 
    var toolTipWidth = $('.toolTipWrapper').width(); 
    alert(documentWidth+" "+toolTipWidth+" "+$(this).offset().left); 
    if ($(this).offset().left + toolTipWidth > documentWidth) { 
     alert("COMING"); 
    } 
    //ends 
    $(this).find('.toolTipWrapper').css({left:this.width+16}) 
    $('.toolTipWrapper').fadeIn(300); 
    }, 
    function() { 
     $('.toolTipWrapper').fadeOut(100); 
    } 
); 
}); 

在HTML我有: 

.toolTip { 
    padding-right: 20px; 
    background: url(../images/help.png) no-repeat right; 
    color: #3366FF; 
    position: relative; 
} 
.toolTipWrapper { 
    width: 350px; 
    position: absolute; 
    top: 10px; 
    display: none; 
    color: #4D4D4D; 
    font-size: 12px; 
    background-color: #EFF0F0; 
    border-color: #C9C9C9; 
    border-width: 1px; 
    border-style: solid; 
    padding: 6px 15px; 
} 

現在工具提示應該轉移它的位置,因此如果窗口較小,它仍然完全可見。我需要將托盤的位置移動到懸停對象的頂部/左側。但是,當我檢查$(this).offset().left + toolTipWidth > documentWidth,我沒有看到條件得到真正的,因爲我看到這些值:

documentWidth 784 toolTipWidth 350 $(this).offset().left 383 

這裏有什麼問題?

回答

1

如果您正在使用的窗口大小調整,它能夠更好地得到windowdocument的高度和寬度,

$(window).height(); 
$(window).width(); 

我覺得這是你的問題!

+0

你救了我的時間:)。謝謝 – user1521828