通过css定位自己的tooltip

Question

我想创建基于 css 的工具提示，但我很难找到正确的位置。 我的想法是将工具提示文本设置为数据工具提示属性并在悬停时显示它们。

现在的问题是，在某些情况下，这个职位是行不通的。 例如，一种情况是，如果工具提示被隐藏溢出的相对定位元素重叠。

看到这个演示小提琴：https://jsfiddle.net/45Lbhusk/

[data-tooltip1]:hover::before {
      content: attr(data-tooltip1);
      left:auto;
      position: fixed;
      margin-top: -1.5rem;
      background: lightgray;
      border: 1px solid black;
    }

    [data-tooltip2]:hover::before {
      content: attr(data-tooltip2);
      left:auto;
      position: absolute;
      margin-top: -1.5rem;
      background: lightgray;
      border: 1px solid black;
    }

    span{
      display: block;
      font-weight: bold;
      margin: 3px;
      padding: 10px;
      border: 1px solid blue;
    }

    div{
      overflow: hidden;
      position: relative;
      background: #eeeeee;
    }

Some <br/>
    dummy <br/>
    text <br/>
    so <br/>
    that <br/>
    scrollbars <br/>
    appear. <br/>
     <br/> <br/>

    <div>
      <span data-tooltip1="Can you read this long text?">Hover for fixed positioned tooltip</span>
    </div>

    <br/>

    <div>
      <span data-tooltip2="Can you read this long text?">Hover for absolute positioned tooltip</span>
    </div>

     <br/> <br/>
    Some <br/>
    dummy <br/>
    text <br/>
    so <br/>
    that <br/>
    scrollbars <br/>
    appear. <br/>

我试图将工具提示定位为“固定”和“绝对”，但两者都有问题：

• 修复了页面滚动时不滚动和工具提示显示在错误位置的问题
• 绝对工具提示可能会被父级剪切。

我阅读了许多关于同一主题的其他问题，但它们需要 js 才能工作或有其他要求。我真的很想有一个只有 CSS 的解决方案。

Answer 1

此解决方案旨在解决 absolute 版本的工具提示被 overflow: hidden 容器剪切的问题。

它使用此 answer 中的方法在设置为 overflow: hidden 的容器中显示 absolute 定位的工具提示。

不利的一面是它确实需要对容器范围进行额外的样式设置，这很可能与最初将其设置为 overflow: hidden 的原因相矛盾。

例子：

[data-tooltip2]:hover::before {
  content: attr(data-tooltip2);
  left: auto;
  position: absolute;
  margin-top: -1.5rem;
  background: lightgray;
  border: 1px solid black;
}

span {
  display: block;
  font-weight: bold;
  margin: 3px;
  padding: 10px;
  border: 1px solid blue;
}

div {
  overflow: hidden;
  position: relative;
  background: #eeeeee;
  padding-top: 100px;
  margin-top: -100px;
  background-clip: content-box;
}

Some <br />
dummy <br />
text <br />
so <br />
that <br />
scrollbars <br />
appear. <br />
<br />
<br />

<div>
  <span data-tooltip2="Can you read this long text?"
    >Hover for absolute positioned tooltip (this container has overflow: hidden)</span
  >
</div>

<br />
<br />
Some <br />
dummy <br />
text <br />
so <br />
that <br />
scrollbars <br />
appear. <br />

Answer 2

请检查以下代码：

[data-tooltip1]:hover::before {
  content: attr(data-tooltip1);
  left:auto;
  position: absolute;
  background: lightgray;
  border: 1px solid black;
  bottom: 100%;
}

[data-tooltip2]:hover::before {
  content: attr(data-tooltip2);
  left:auto;
  position: absolute;
  background: lightgray;
  border: 1px solid black;
  bottom: 100%;
}

span{
  display: block;
  font-weight: bold;
  margin: 3px;
  padding: 10px;
  border: 1px solid blue;
}

div{
  overflow: visible;
  position: relative;
  background: #eeeeee;
}

    Some <br/>
    dummy <br/>
    text <br/>
    so <br/>
    that <br/>
    scrollbars <br/>
    appear. <br/>
     <br/> <br/>

    <div>
      <span data-tooltip1="Can you read this long text?">Hover for fixed positioned tooltip</span>
    </div>

    <br/>

    <div>
      <span data-tooltip2="Can you read this long text?">Hover for absolute positioned tooltip</span>
    </div>

     <br/> <br/>
    Some <br/>
    dummy <br/>
    text <br/>
    so <br/>
    that <br/>
    scrollbars <br/>
    appear. <br/>

目前在悬停元素的顶部位置添加工具提示。 如果你想要更多的调整，请告诉我。