Question

这里我得到了一个仅限CSS的工具提示：

https://jsfiddle.net/r0zg014b/3/

我希望：after伪元素根据文本内容获得流畅的宽度（也就是最大宽度）。

在小提琴中你可以看到我的测试。 atm我用
和white-space: pre;换行，但我不想要这些：D

display: table;为safari工作，但是e.x.不适用于Firefox： https://jsfiddle.net/r0zg014b/4/

对此有任何解决方案吗？

Answer 1

您遇到的问题与应用于伪元素的样式无关。您希望绝对定位元素的增长可能比其相对定位的容器更宽，默认情况下它不会这样做。您可以指定工具提示的宽度始终为例如340px这将有效。但是，目前工具提示最多只能与应用的span一样宽。

一种解决方法（感觉很麻烦）是扩展span元素的宽度。您可以通过在元素上应用大填充和负边距来执行此操作，如下所示。

padding: 0 170px;
margin: 0 -170px;

这将扩展跨度的宽度，但由于负边距，它会显示应该具有的宽度。然而，这样做会产生不良副作用。您可以在this Fiddle中看到（我只是将更改应用到您的）。最值得注意的是，请注意当鼠标靠近文本时会出现工具提示，因为跨度会变宽。此外，当发生换行时，工具提示可能出现在错误的位置。

一种更好的方法是可行的，即通过一个绝对定位的容器，其总宽度为340px，并且具有max-width: 340px的实际工具提示。这确实需要一个额外的容器元素，因此你的伪元素方法是不可能的...如果你想看到它，那么我可以创建一个演示。

Answer 2

这是你要找的吗？

body {
  padding: 140px;
}
[data-tooltip] {
  position: relative;
  z-index: 1;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}
[data-tooltip]:before {
  content: "";
  width: 0;
  height: 0;
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  border-top: solid 5px rgba(34, 50, 84, 0.9);
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 3;
  margin-bottom: 3px;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -5px);
}
[data-tooltip]:after {
  position: absolute;
  content: attr(data-tooltip);
  padding: 10px 16px;
  bottom: 100%;
  margin-bottom: 8px;
  left: 50%;
  overflow: hidden;
  display: block;
  background: rgba(34, 50, 84, 0.9);
  color: #fff;
  z-index: 2;
  font-size: 14px;
  white-space: nowrap;
  line-height: 20px;
  visibility: hidden;
  border-radius: 3px;
  opacity: 0;
  transform: translate(-50%, -5px);
}

<span data-tooltip="Lorem ipsum">Short</span>
<span data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">Long</span>
<span data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">Want</span>

伪元素工具提示流体宽度

2 个答案: