在制作工具提示时在另一个跨度内水平居中跨度？答案

【问题标题】：Horizontally center span within another span in making a tooltip?在制作工具提示时在另一个跨度内水平居中跨度？
【发布时间】：2014-10-08 21:32:36
【问题描述】：

对于包含在span 元素中的给定单词，我试图仅使用纯 CSS 使工具提示出现在悬停时（没有各种工具提示功能，原因是我需要在工具提示中显示 LaTeX） .工具提示本身是其父 span 中的 span。目前，当我尝试在右侧实现结果时，我得到了一个偏离中心（左侧）的工具提示：

JSFiddle here。我尝试了各种显示（内联、表格、块）与自动 0 边距等的组合，但均未成功。

【问题讨论】：

它可能会也可能不会满足您的需求，但请查看：stackoverflow.com/questions/21709674/…

标签： html css tooltip

【解决方案1】：

尝试添加以下 css 属性，让我知道它对您的作用：

.link-cont:hover .tooltip{

    display: table; 
        left: 10%;

}

您应该能够根据自己的需要进行调整 - 在这个特定的示例中，10% 的人似乎可以解决问题。

（我已经用上面的内容为你更新了你的 JS 小提琴）

【讨论】：

【解决方案2】：

这是因为您的工具提示是绝对位置。您不能在绝对值上使用自动边距。

尝试让您的容器将工具提示放置在绝对文本上方，然后在其中放置另一个相对的子元素。您可以自动赋予该元素边距。

【讨论】：

【解决方案3】：

使工具提示居中的一种相当简单的方法是创建一个包装器.tip-wrap，即链接文本块.link-cont 的子元素。 tip-wrap 宽度相同作为其父级，并有text-align: center 将内联块.tooltip 居中。

.tip-wrap 绝对位于.link-cont 的顶部边框上方。

由于您指定高度为 20px，而装饰三角形为 5px，因此顶部偏移为 25px。

注意：如果你的工具提示比链接文本长，那么你需要做一些调整.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>

【讨论】：