用鼠標懸停的CSS中心工具提示

我搜索了很多自定義的CSS工具提示。我已經將一對夫婦合併爲一個我非常喜歡的，但我有一個問題，我希望它是可以解決的。用鼠標懸停的CSS中心工具提示

我無法解決的問題是如何使工具提示居於鼠標中心。 JavaScript是什麼讓它移動鼠標，所以我相信有一些代碼正確的「e.clientX」，我需要添加到它的中心，而不是隻設置60px，但不真正知道JavaScript。

下面是它的一個小提琴：http://jsfiddle.net/kkx9uhu1/ 如果您將鼠標懸停在顏色方塊上，則會顯示使用CSS進行自定義的工具提示。

var x = (e.clientX - 60) + 'px', 
    y = (e.clientY - 40) + 'px'; // Here the 60 should be something to center the tooltip instead

來源

2015-06-09 BrinkDaDrink

只需除以2的寬度，並且會居中：

window.onmousemove = function (e) { 

     for (var i = 0; i < tooltips.length; i++) { 

      tooltips[i].style.top = (e.clientY - 40) + 'px'; 
      tooltips[i].style.left = (e.clientX - (tooltips[i].offsetWidth/2)) + 'px'; 
     } 
    };

的的jsfiddle的here。另外，請注意，我也改變了CSS：在.tooltiptext我刪除了20px的邊距並將位置改爲絕對。此外，由於您只使用這些值一次，因此不需要將X和Y值緩存到變量中。最後，原始提琴行20中存在CSS錯誤，Left不是有效的屬性。

來源

2015-06-09 00:46:49 frenchie

你能告訴我你把它從相對變爲絕對的原因嗎？只是爲了將來的理解。非常感謝。 – BrinkDaDrink

@PeterBrink：只是從經驗。如果我需要手動調整某個東西的位置，那麼我想確保我設置了所有東西;如果您選擇相對，則意味着定位取決於某個其他元素的位置，如果該網站稍後發生更改，則該位置可能會更改。例如，在你的情況下，我掙扎了幾分鐘，想知道爲什麼儘管js代碼的元素沒有居中：20px的邊緣！簡而言之，您希望定位依賴於儘可能少的事情。 – frenchie

您只需將工具提示的寬度添加到您的計算中即可。

window.onmousemove = function (e) { 

    for (var i = 0; i < tooltips.length; i++) { 
     var width = tooltips[i].offsetWidth; 
     var x = (e.clientX - (width)/2) + 'px', 
      y = (e.clientY - 40) + 'px'; 

     tooltips[i].style.top = y; 
     tooltips[i].style.left = x; 
    } 
};

這裏是一個更新的fiddle

來源

2015-06-09 00:46:18 ThiagoPXP

用鼠標懸停的CSS中心工具提示

回答

相關問題