Question

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

absolute

CSS：

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

但是，我必须使用绝对值来定位或调整此.tooltip { position: relative; } .tooltip:hover:after { content: attr(custom-tooltip); position: absolute; background: #000000; color: white; }元素

:after

如果我想使元素尽可能宽（如果百分比是相对于父元素创建一个大的垂直框，那么我不能告诉它去top: 30px; left: -30px; width: 300px;）

以父母为中心（width: 100%导致它被移动到父级的50％左侧，而不是居中）

这可能没有javascript吗？（如果没有，是否有一些魔术选择器或函数可以获得这个或那个的宽度和left: -50%正确的值？

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。

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

Answer 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

CSS3“工具提示”用：悬停：定位和大小后

2 个答案: