CSS3“工具提示”与：悬停：定位和大小之后答案

【问题标题】：CSS3 "Tooltip" with :hover:after positioning and sizeCSS3“工具提示”与：悬停：定位和大小之后
【发布时间】：2021-10-10 09:55:50
【问题描述】：

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

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() 正确的值？

【问题讨论】：

您可以通过仅声明左值或右值来使其尽可能宽，而无需任何宽度。我之前曾尝试仅使用 CSS 使其居中，但无济于事。希望其他人有解决方案！
在我的测试中，如果你不给它一个特定的宽度，它仍然保持父对象的宽度（或者在left:的情况下它一直持续到父对象的右边界）
这是我前段时间做的一个纯CSS tooltip，宽度是灵活的。 joshuanhibbert.com/sandbox/css-tooltips
非常好，可惜如果这样定位它会滚出屏幕。
我不确定我是否理解您所说的滚出屏幕的意思？

标签： css tooltip

【解决方案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。

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

【讨论】：

nowrap 技巧很棒，但它允许工具提示滚动到屏幕外（并创建一个令人讨厌的滚动条并可能搞砸布局）您将如何防止这种情况发生？
你可以在body上用overflow-x:hidden阻止滚动，但是工具提示会被切断。 CSS 不支持位置感知样式，因此更改窗口边缘附近行为的唯一方法是使用 JavaScript。
好吧，我想这行得通。那么真正使这样的工具提示起作用的唯一方法是使用 javascript？
是的。并且有很多工具提示插件可用于 jQuery 或任何其他 JavaScript 库。
很好的解决方案！注意： ::after 不适用于 img 或 input 元素，因此必须为这种替换元素添加包装器，并将工具提示分配给包装器。 More info

【解决方案2】：

.tooltip
 {
  display: inline;
  position: relative;
 }
.tooltip:hover:after
 {
  background: #333;
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
 }

来自TalkersCode的代码在此处完成代码Create CSS3 Tooltip

【讨论】：