2013-04-24 143 views
0

我與以下選項的工具提示插件工作:獲取鼠標位置或元素位置

  1. 鼠標= TRUE | FALSE。工具提示相對於鼠標或元素的位置;

  2. Static = True | False。當選項Mouse = true時跟隨鼠標。

我有一個的jsfiddle例如:http://jsfiddle.net/mdmoura/RPUX6/

問題:

當我把鼠標放在列表的最後提示的位置是錯誤的。

每當我滾動頁面時都會發生這種情況...我不知道爲什麼。

其設置的位置代碼的部分是:

$(this).each(function (e) { 
    // SOME CODE 

    $this.mouseenter(function (e) { 

    var $tooltip = 
     $("<div>") 
     .attr("class", options.class) 
     .html(options.content !== '' ? (typeof options.content === 'string' ? options.content : options.content($this, $tooltip)) : tooltip.title) 
     .appendTo('body'); 

    $this.attr('title', ''); 

    var position = [0, 0]; 

    if (options.mouse) { 
     position = [e.clientX + options.offset[0], e.clientY + options.offset[1]]; 
    } else { 
     var coordinates = $this[0].getBoundingClientRect();  
     position = [ 
     (function() { 
      if (options.offset[0] < 0) 
      return coordinates.left - Math.abs(options.offset[0]) - $tooltip.outerWidth(); 
      else if (options.offset[0] === 0) 
      return coordinates.left - (($tooltip.outerWidth() - $this.outerWidth())/2); 
      else 
      return coordinates.left + $this.outerWidth() + options.offset[0]; 

     })(), 
     (function() { 
      if (options.offset[1] < 0) 
      return coordinates.top - Math.abs(options.offset[1]) - $tooltip.outerHeight(); 
      else if (options.offset[1] === 0) 
      return coordinates.top - (($tooltip.outerHeight() - $this.outerHeight())/2); 
      else 
      return coordinates.top + $this.outerHeight() + options.offset[1]; 

     })() 
     ]; 
    } 

    $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' }); 

您也可以看到代碼和http://jsfiddle.net/mdmoura/RPUX6/演示。

謝謝!

回答

2

您需要註冊該窗口的scrollTopscrollLeft

基本思想:

var win = $(window); 
$tooltip.css({ 
    left: position[0] + win.scrollLeft() + 'px', 
    top: position[1] + win.scrollTop() + 'px' 
}); 
+0

它的工作原理!謝謝 – 2013-04-24 15:56:52

1

添加scrollTop的由

document.body.scrollTop 

你會好到哪裏去..

在您的代碼進行這些更改

功能(){ if(o ptions.offset [1] < 0) return coordinates.top - Math.abs(options.offset [1]) - $ tooltip.outerHeight()+ document.body.scrollTop; else if(options.offset [1] === 0) return coordinates.top - (($ tooltip.outerHeight() - $ this.outerHeight())/ 2)+ document.body.scrollTop; else return coordinates.top + $ this.outerHeight()+ options.offset [1] + document.body.scrollTop;

})