jQuery工具提示，絕對和保證金的位置

我正在使用jquery插件：Tools.tooltip()似乎定位確實是一個問題。jQuery工具提示，絕對和保證金的位置

當工具提示被包裝在某個位置爲absolute的容器中時，您需要在conf字典中添加relative:true，以便正確定位工具提示。

現在的問題是：如果你同時擁有position:absolute包裝以及提示保證金觸發，該位置將被搞砸

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script> 
<style> 
.trigger 
{ 
    width:100px; 
    height:40px; 
    background-color:red; 
    margin:5px; 
    position:relative; 
} 
.tooltip 
{ 
    display:none; 
    color:white; 
    background-color:#333; 
    padding:10px; 
    border-radius:3px; 
} 
</style> 
<div class='wrapper' style='position:absolute;left:100px;top:100px'> 
    <div class='trigger' style='margin-top:100px;margin-left:100px'> 
     hover to see the tooltip 
    </div> 
    <div class='tooltip'> 
     The awesome tooltip 
    </div> 
</div> 

<script type='text/javascript'> 
    $('.trigger').tooltip({ 
     position:'bottom center', 
     relative:true, 
    }); 
</script>

的提示應該是顯示觸發之下，在這個中心案件。但是，當鼠標懸停在觸發器（紅色框），工具提示（灰色框）是表示在該位置處：

enter image description here

彷彿餘量完全忽略。另外，如果我完全不（僅具有位置的包裝：絕對和使用相對：在CONF真）使用保證金，工具提示仍然顯示在一個陌生的位置：

enter image description here

的提示與左側和上側相比，位置稍微有些偏差，這是我不知道的。

我該如何解決這個問題？非常感謝！ :)

來源

2011-12-02 Xun Yang

怎樣的位置搞砸的扳機？工具提示是否相對於'.trigger'或'.wrapper'定位？你能提供一個有效的例子或者說明問題的延伸，那很好。 Cuz'我在想，使用tooltip庫的'offset'屬性可以解決一些問題。 –

我剛剛編輯了一下，並放入了一些圖片，希望它看起來更清晰。如果使用偏移量，我需要指定每個不同的邊距，這對我不利。 –

我讓你有點小提琴，「kindda」解決了你的問題。

在這個小提琴中，工具提示獲取觸發器下方的位置，但需要x次「懸停」才能使其100％正確放置。我認爲這是由工具提示庫中的某些（錯誤）功能引起的。

這裏的小提琴：http://jsfiddle.net/Gjw74/1/

而修改的javascript：

$('.trigger').tooltip({ 
    position:'bottom center', 
    relative:true, 
    onShow: function(){ 
     var $trigger = this.getTrigger(); 
     this.getTip().css({ 
      'margin-top' : $trigger.css('margin-top'), 
      'margin-left' : $trigger.css('margin-left') 
     }); 
    } 
});

來源

2011-12-05 14:07:39

嗨托爾！我剛剛發現，如果我從觸發器的CSS中刪除'margin：5px'，這一切都是正確的。不管怎麼說，還是要謝謝你！似乎jQuery工具提示在處理邊距和定位方面非常糟糕。他們需要解決這個問題，或者至少以明顯的方式記錄這些限制 –

所以，如果你想使用jQuery的工具提示：

如果提示被包裹在一個「位置：絕對'或 '位置：固定'容器，供應'相對：真'與ini 配置。
在這種情況下，沒有任何餘量添加到工具提示

來源

2011-12-05 17:28:32

jQuery工具提示，絕對和保證金的位置

回答

相關問題