在制作工具提示时，在另一个范围内水平居中？

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的上边框上方。

由于您指定的高度为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>