Question

我使用tooltip属性和:: after pseudoelement为我的网站创建了一个简单的工具提示系统。不幸的是，因为伪元素位于其父元素之外，所以它希望换行到父元素的大小。有没有办法在不阻止完全包装的情况下防止这种情况发生？

CSS：

[tooltip]
{
    position: relative;
    cursor: help;
}

[tooltip]::after
{
    pointer-events: none;
    position: absolute;
    content: attr(tooltip);
    left: 100%;
    top: 50%;

    margin-left: 3px;
    background-color: #111111;
    color: white;
    width: auto;
    padding: 3px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: normal;
    padding-left: 6px;
    padding-right: 6px;
    display: none;
    z-index: 3;
    max-width: 1000px;
}

[tooltip]:hover::after
{
    display: inline-block;
}

HTML：

<span tooltip = "This is some information! Unfortunately, it seems to want to line break very early.">Mouse over me!</span>

Answer 1

不要让元素相对定位。这样，伪元素的包含块将是视口（或者，希望是足够宽的元素）。

[data-tooltip] { position: static; } /* default value */

不要设置伪元素的left属性。 auto将计算到静态位置，这是元素的结尾，因为它是::after伪元素。

[data-tooltip]::after { left: auto; } /* default value */

使用一些边距而不是top，例如

[data-tooltip]::after {
  top: auto; /* default value */
  margin-top: .75em;
}

伪元素的宽度不受元素宽度的限制，只受视口（或最近的祖先）的限制。您可以使用max-width：

减少（但不增加）该限制

[data-tooltip]::after { max-width: 1000px; }

＆＃13;

[data-tooltip] {
  cursor: help;
}
[data-tooltip]::after {
  pointer-events: none;
  position: absolute;
  content: attr(data-tooltip);
  margin-top: .75em;
  margin-left: 3px;
  background-color: #111111;
  color: white;
  width: auto;
  padding: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  width: auto;
  z-index: 3;
  max-width: 1000px;
}

＆＃13;

<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early.">Mouse over me!</span>
<br /><br /><br />
<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. ">Mouse over me!</span>

＆＃13;

Answer 2

将right设置为足够小的值，至少减去最大宽度减去填充，边框和边距：

right: -1015px;

如果您不想进行计算，可以使用-100000000000px之类的微小值，但是您需要max-width。如果您使用了确切的值，则可以删除max-width（如果需要）

max-width: -1000px;

最后，使用其中一个：

width: fit-content;
width: max-content;

请注意，它们尚未得到广泛支持，因此您可能需要供应商前缀。

＆＃13;

[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  pointer-events: none;
  position: absolute;
  content: attr(data-tooltip);
  left: 100%;
  top: 50%;
  margin-left: 3px;
  background-color: #111111;
  color: white;
  width: auto;
  padding: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  width: auto;
  z-index: 3;
  right: -100000000000px; /* Tiny value */
  max-width: 1000px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

＆＃13;

<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early.">Mouse over me!</span>
<br /><br /><br />
<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. ">Mouse over me!</span>

＆＃13;

Answer 3

替换：

[tooltip]::after
{
    position: absolute;
    left: 100%;
}

使用：

[tooltip]::after
{
    position: relative;
    left: 0;
}

另外，我认为你不需要最大宽度。

https://jsfiddle.net/v5zhf2nu/2/

位于父线外部的伪元素早期包裹

3 个答案: