如何在jQuery中定位相對於其觸發器元素的工具提示？

我想在工具提示中顯示JSON響應（來自ajax調用）。我想將工具提示相對於它的觸發元素（一個錨點）放置在它的左下方。我將在同一頁面上有很多觸發元素。我想用這樣的東西：如何在jQuery中定位相對於其觸發器元素的工具提示？

$.ajax({ 
    // Do stuff 
    success: function(response) { 
     $(this).after("<div class='tooltip'>" + response.message + "</div>"); 
    } 
});

此代碼不能解決我的問題。它將工具提示插入到目標元素的容器中。我需要工具提示浮動並且獨立於目標元素，有點像StackOverFlow在提交帖子時顯示的工具提示。

任何想法如何在jQuery中做到這一點？

來源

2011-07-10 Mohamad

爲了使您的提示獨立於其他元素，它應該是一個直接孩子你<body>的和高z-index CSS屬性。

如果您嘗試將工具提示放到其他地方的DOM中，可能會干擾頁面佈局。

然後只需使用absolute定位基於觸發元素的座標。

.tooltip { 
    z-index: 10000; 
    position: absolute; 
} 

var offset = $(trigger).offset(); 
offset.top += $(trigger).height(); 
$(tooltip).offset(offset);

來源

2011-07-10 20:50:05 Alnitak

它不一定必須是'body'的直接孩子，只要它的位置是絕對的（並且其父母不是相對定位的），它就完全從文檔流中取出。 –

@jack是真的，但它有幫助。我通常在所有樣式表中都有'div {position：relative}'作爲默認值。 – Alnitak

@Alnitak，謝謝。但是，我如何注入工具提示div？（）後仍然使用？ – Mohamad

您可以使用jquery ui position()將您的工具提示放在相對於特定元素的響應中。

來源

2011-07-10 20:34:45 Litek

如何在jQuery中定位相對於其觸發器元素的工具提示？

回答

相關問題