以小圖標爲中心的彈出式工具提示

Question

我已經遇到需要特定類型的懸停（或有時是點擊）下拉工具提示，通過一個小圖標激活，例如20x20像素。設計看起來是這樣的：

所以，正如你所看到的，出現的盒子懸停在頁面上的所有其他內容上。它的寬度和高度根據內容而變化。

像往常一樣，現在面臨的挑戰是僅使用CSS完成此任務。幸運的是，在這種情況下，我只擔心流血的瀏覽器，並且根本不需要考慮移動設備。在過去，由於時間不夠，我已經縮短了時間，並在左側放置了頂部的「指針」元素（以圖標爲中心），並將整個框對齊到圖標的左側邊緣 - 但這遠非最佳。

我很想在這裏提出任何建議，這將是一個夢幻般的解決方案，在未來我的武庫。

Answer 1

我想你會需要知道寬度，以便將盒子居中放置在小於自身的元素內。如果你只考慮流行的瀏覽器，那麼必要的JS將會簡單快速的編寫和運行。像這樣的元素

我的標準中心的技術是：

.icon {position:relative;} 
.popUp {position:absolute; 
    width:200px; 
    left:50%; 
    margin-left:-100px; /* Half the width */ 
} 

所有你需要做的，使工作將檢測到您的內容與JS的寬度，並設置相應的左緣。我相信你可以爲碰巧有JS禁用/不可用的任何用戶設置一些合理的默認值。