製作工具提示時，在另一個跨度內水平居中跨度？

Question

對於包裝在span元素中的給定單詞，我嘗試使用純CSS（沒有各種工具提示函數，原因是我需要在工具提示中顯示LaTeX）在懸停時顯示工具提示。該工具提示本身是其母公司span內的span。目前，我得到一個工具提示，偏離中心（左），而我試圖實現對後的結果：

的jsfiddle here。我嘗試過各種組合的顯示（內聯，表格，塊）和自動0邊距等，但不成功。

Answer 1

嘗試添加以下CSS屬性，讓我知道如何工作的你：

.link-cont:hover .tooltip{ 

    display: table; 
     left: 10%; 

} 

你應該能夠調整，以滿足您的需求 - 10％，似乎這樣的伎倆與這個特殊的例子。

（我和上面的更新您的JS搗鼓你）

Answer 2

這是因爲你的刀尖位置絕對的。絕對不能使用margin auto。

嘗試讓您的容器將工具提示放置在絕對文本的上方，然後在裏面有另一個相對的子元素。你可以給這個元素邊際自動。

Answer 3

中心工具提示的一種相當簡單的方法是創建一個包裝.tip-wrap即 鏈接文本塊.link-cont的子元素。 tip-wrap與其父項具有相同寬度 ，並且具有text-align: center以將內聯塊.tooltip居中。

.tip-wrap絕對位於.link-cont的頂部邊界上方。

由於您指定的高度爲20像素，裝飾三角形爲5像素，所以頂部偏移量爲25像素。

注：如果你的刀尖比鏈接文本更長的時間，那麼你就需要做出一些調整 向.tip-wrap的定位。指定足夠長的寬度（精確長度無關緊要），然後將 的負邊距應用到指定寬度的一半。

.tip-wrap { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    bottom: 25px; 
 
    width: 200px; 
 
    display: none; 
 
    text-align: center; 
 
} 
 
.link-cont { 
 
    display: inline-block; 
 
    cursor: default; 
 
    position: relative; 
 
    background: grey; 
 
    width: auto; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    overflow: visible; 
 
} 
 
.tooltip { 
 
    background: #000; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 15px; 
 
    border-radius: 10px; 
 
    display: inline-block; 
 
    height: 20px; 
 
    height: auto; 
 
    text-align: center; 
 
} 
 
.link-cont:hover .tip-wrap { 
 
    display: block; 
 
} 
 
.tooltip .tooltip-triangle { 
 
    display: block; 
 
    position: absolute; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    content: ""; 
 
} 
 
.tooltip .tooltip-triangle { 
 
    border-top: 5px solid #000; 
 
    bottom: -5px; 
 
    left: calc(50% - 5px); /* slightly more accurate */ 
 
}

<p>Text. 
 
    <br> 
 
    <br> 
 
    <br>This is a <span class="link-cont">loooooooooooooooooooooooooong 
 
    <span class="tip-wrap"><span class="tooltip ">the content<span class="tooltip-triangle"></span></span> 
 
    </span> 
 
    </span> word.</p> 
 
<p>This is a sentence containing a <span class="link-cont">short 
 
    <span class="tip-wrap"><span class="tooltip ">the short word content<span class="tooltip-triangle"></span></span> 
 
    </span> 
 
    </span> word and a few extra at the end.</p>