CSS3 "Tooltip"和 :hover:after positioning and size

Question

我知道可以使用 :hover:after 选择器创建自定义“工具提示”，并通过将原始元素标记为 position 来使此工具提示相对于原始元素对齐:相对 和工具提示作为绝对。

HTML:

test
<span custom-tooltip="testing a custom tooltip" class="tooltip">
    test
</span>
test

CSS:

.tooltip {
    position: relative;
}

.tooltip:hover:after {
    content: attr(custom-tooltip);
    position: absolute;
    background: black;
    color: white;
}

但是，我必须使用绝对值来定位或调整此 :after 元素

top: 30px;
left: -30px;
width: 300px;

如果我想让元素达到它需要的宽度怎么办(百分比是相对于父元素创建一个大的垂直框所以我不能告诉它去 width: 100%)

并在父级下方居中(left: -50% 导致它向左移动父级的 50%，而不是居中)

如果没有 javascript，这可能吗？ (如果没有，是否有一些神奇的选择器或函数来获取这个或那个的宽度以及 calc() 正确的值？

Answer 1

您可以使用 white-space:nowrap 将工具提示强制放在一行中。我不知道有什么方法可以在不强制工具提示和工具提示适用的元素上都设置特定宽度的情况下使工具提示居中。这是一个通用示例(没有居中):

<p>Lorem <span tooltip="Lorem ipsum">ipsum</span> dolor sit amet.</p>

还有 CSS:

*[tooltip] {
  position: relative;
  border-bottom: dotted 1px #000;
}
*[tooltip]:hover:before {
  content: attr(tooltip);
  background-color: #000;
  color: #fff;
  top: 1em;
  position: absolute;
  white-space: nowrap;
}

请注意，我使用的是 :before 而不是 :after。如果您想将工具提示居中并且能够定义固定宽度，您可以改用此 CSS:

*[tooltip] {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 200px;
  margin: 0 -75px;
}
*[tooltip]:hover:before {
  content: attr(tooltip);
  background-color: #000;
  color: #fff;
  top: 1em;
  position: absolute;
  white-space: nowrap;
  width: 200px;
}

在这里，元素被赋予固定宽度，等于工具提示的宽度，然后负左/右边距将其折叠回所需大小。请注意添加了 display:inline-block 和 text-align:center。

此技术不适用于内联工具提示，但适用于按钮和“号召性用语”链接。