html - 在父项下方水平居中工具提示而不设置静态宽度

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>

标签： htmlcss

Answer 1

最简单的方法是translate()否定的margin。只要工具提示不长于文本本身，它就会起作用......它可能会离开屏幕

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>