将工具提示水平居中在父对象下方，而不设置静态宽度

Question

我试图在不设置工具提示静态宽度的情况下，将工具提示水平居中在其父工具提示下。这可能吗？请参阅下面的代码片段。我可以调整绝对位置，使其完全居中，但由于文本的长度会有所不同，它们不会全部居中。

body {
margin: 20px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}

<div class="tooltip">Hover over me
<span class="tooltiptext">Notifications</span>
</div>
<br/><br/><br/><br/>
<div class="tooltip">Hover over me
<span class="tooltiptext">Account</span>
</div>
<br/><br/><br/><br/>
<div class="tooltip">Hover over me
<span class="tooltiptext">Help</span>
</div>

Answer 1

最简单的是translate()，而不是négativemargin。只要工具提示不长于文本本身，它就会起作用。。。它可能会离开屏幕

body {
margin: 20px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
/* see center */
.tooltip, .tooltiptext {
background-image: linear-gradient(to left, transparent 50%, gray 50%);
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
transform: translate(-50%, 0)
}
.tooltip:hover .tooltiptext {
visibility: visible;
}

<div class="tooltip">Hover over me
<span class="tooltiptext">Notifications</span>
</div>
<br/><br/><br/><br/>
<div class="tooltip">Hover over me
<span class="tooltiptext">Account</span>
</div>
<br/><br/><br/><br/>
<div class="tooltip">Hover over me
<span class="tooltiptext">Help</span>
</div>