jQuery懸停工具提示的CSS動態位置

我正在寫一個簡單的可以容納HTML標籤的工具提示。演示請檢查http://jsfiddle.net/Qkwm8/。jQuery懸停工具提示的CSS動態位置

我希望工具提示框能夠正確顯示，無論元素的位置如何，在本例中爲<a>，它顯示mouseover事件的工具提示。

工具提示示除了<a>漂浮時右（或是在該行的末端），或在屏幕的底部並在沒有正確顯示細，它出現了屏幕

如果<a>漂浮在右邊，或者在行尾，或者位於屏幕的底部，我希望工具提示更改位置以便它保持可見

謝謝。

更新演示鏈接

這裏的完整結果：http://jsfiddle.net/Qkwm8/3/

來源

2011-05-19 Narazana

做你想做的工具提示翻轉到左側，如果有在右手邊沒有窗戶的空間， – kobe 2011-05-19 15:50:51

您可以使用文檔寬度檢查HTML文檔有多寬，並相應調整左側位置。說：

//set the left position 
    var left = $(this).offset().left + 10; 
    if(left + 200 > $(document).width()){ 
     left = $(document).width() - 200; 
    }

我在這裏使用了200，因爲您將工具提示設置爲200px寬。類似的東西可以用高度來完成。

還有一個窗口寬度，但我總是對差異感到困惑，所以你應該檢查哪一個給你更好的結果。

頁面底部的一個例子是：

//set the height, top position 
    var height = $(this).height(); 
    var top = $(this).offset().top; 
    if(top + 200 > $(window).height()){ 
     top = $(window).height() - 200 - height; 
    }

同樣，使用200，因爲你是你的提示設置爲200像素高度。

來源

2011-05-19 15:55:47

@Narazana你可以用類似於左邊工作的方式來做。而是使用height（）函數。我會用一個例子來編輯答案。 – 2011-05-19 17:32:03

謝謝，Vicent。我終於做到了。我只是更新了問題，包括最新的更新演示http://jsfiddle.net/Qkwm8/3/ – Narazana 2011-05-19 18:03:16

@VincentRamdhanie親愛的文森特拉姆丹妮你能檢查我的問題嗎？ [計算器]（http://stackoverflow.com/questions/26822445/css-hover-card-positioning） – innovation 2014-11-09 00:34:54

$（ 'a.show-工具提示'）。鼠標懸停（函數（）{

IF（（$（本）.parent（））。CSS（ '浮動'））== 「右」）添加適當的類向左

其他 - >合適的一個正確的 .... }

來源

2011-05-19 15:59:00 Ben

jQuery懸停工具提示的CSS動態位置

回答

相關問題