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

我知道可以使用

：hover:after

选择器创建自定义“工具提示”，并通过将原始元素标记为

位置：相对

，将工具提示标记为

绝对

，将此工具提示与原始元素相对对齐

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

但是，我必须使用绝对值来定位或调整元素后面的

：的大小

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

如果我想使元素尽可能宽（百分比是相对于父元素的，创建了一个大的垂直框，所以我不能告诉它去
宽度：100%
）

并在父对象下方居中（
left:-50%
导致将父对象的50%移动到左侧，而不是居中）

如果没有javascript，这是可能的吗？（如果没有，是否有一些神奇的选择器或函数来获取这个或那个和
calc（）的宽度）
正确的值？
您可以使用
空白：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

这种技术不适用于内联工具提示，但适用于按钮和“调用操作”链接

此处完整代码中的代码
只需声明一个左或右值，就可以使其尽可能宽，而不需要任何宽度。我以前曾尝试仅使用CSS将其居中，但没有任何效果。希望其他人有一个解决方案！在我的测试中，如果您不指定父对象的宽度，它仍然保持父对象的宽度（或在
left:
的情况下，它将一直持续到父对象的右边界）这是我不久前做的一个纯CSS工具提示，宽度是灵活的。非常好，可惜如果这样定位，它会从屏幕上滚下来。我不确定我是否理解你所说的从屏幕上滚下来的意思。
nowrap
技巧很棒，但它允许工具提示从屏幕上滚下来（并创建一个讨厌的滚动条，可能会破坏布局）如何防止这种情况发生？你可以通过主体上的
overflow-x:hidden
来防止滚动，但是工具提示会被切断。CSS不支持位置感知样式，因此改变窗口边缘行为的唯一方法是使用JavaScript。好吧，我想这是可行的。因此，真正实现让这样的工具提示在javascript中起作用？是的。还有很多工具提示插件可用于jQuery或任何其他javascript库。很好的解决方案！注意：：after不适用于img或输入元素，因此必须为此类替换元素添加包装器，并将工具提示分配给包装器。
<p>Lorem <span tooltip="Lorem ipsum">ipsum</span> dolor sit amet.</p>

*[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;
}

*[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;
}

.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;
 }