如何在 HTML 中的容器上显示元素？

Question

我想为该元素制作一个自定义工具提示，但我将其包含在框中，该框没有足够的空间用于工具提示，所以它只是裁剪（好吧，从技术上讲，我可以滚动显示它，因为overflow设置为auto，但我希望它不这样做就可见）。有没有办法让它从边缘弹出？我试过使用z-index 没有结果。

这就是我所说的：

.box {
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
}

.tooltip {
  padding-top: 20px;
  position: relative;
  display: inline-block;
}


.tooltip .tooltiptext {
  display: none;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border-style: solid;
  border-color: #1a7bd9;
  position: absolute;
  z-index: 1000000;
}

.tooltip:hover .tooltiptext {
  display: block;
}

<div class='box'>
  <div class='tooltip'> Hover for tooltip
    <div class='tooltiptext'>
      Wow, this is amazing, such an epic tooltip text
    </div>
  </div>
</div>

编辑：悬停在元素上起作用很重要，而不是它所在的框。

Answer 1

有很多方法可以解决这个问题，但如果您只是寻找在容器外可见的工具提示，则不需要 z-index 或 overflow。您只需要移动工具提示，使其在相对容器内的定位上下文中紧随其后。

根据您的评论，由于您希望工具提示仅在将鼠标悬停在文本上时出现，因此我建议让您的相对容器精确地环绕您想要悬停的内容。为了说明这一点，我在外框上添加了一个边框，而不是您决定使用相关容器的位置。

然后，只需将 box:hover 更改为 relative-container:hover 以定位适当的元素。

我试图将 HTML 和类组织得更加语义化和简洁，以便于说明。希望有帮助！

例子

.box {
  padding: 30px;
  border: blue solid;
  width: 300px;
  display: flex;
  align-items: center;
}

.relative-container {
  position: relative;
}

.box-content {
  border-style: solid;
  border-color: red;
  padding: 10px;
}

.tooltip {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border: #1a7bd9 solid;
  display: none;
}

.relative-container:hover .tooltip {
  display: block;
  cursor: pointer;
}

<div class='box'>
  <div class='relative-container'>
    <div class='box-content'>
      Hover for tooltip. I have a little padding to give the text some room.
    </div>
    <div class='tooltip'>
    Wow, this is amazing, such an epic tooltip text. I'm aligned with the top left of the element containing text. I only appear when hovering over the element with text, not the surrounding container.
    </div>
  </div>
</div>

有没有办法在文本上方制作工具提示？

工具提示位置在文本上方的示例

当然，只需阅读一些关于 position: absolute; 的内容。您可以根据需要将其相对于相关容器定位。将它与您决定如何在容器内放置实际内容相结合，可以为您提供许多选择，但您必须记住工具提示的动态大小基于内容长度、屏幕/浏览器尺寸和悬停目标元素的位置和工具提示！ :) JS在这里可以派上用场。

 .box {
  padding: 30px;
  border: blue solid;
  width: 300px;
  display: flex;
  align-items: center;
}

.relative-container {
  position: relative;
}

.box-content {
  border-style: solid;
  border-color: red;
 }

.tooltip {
  position: absolute;
  left: 0;
  /* minus surrounding container padding and border*/
  top: -34px;
  border: #1a7bd9 solid;
  min-width: 15vw;
  /* full width accounting for subtracting left/right margins from body in snippet (8x2 = 16) minus border widths and left padding of surrounding container (30 + 8 = 38)* - content is fluid though so up to you how you deal with it if the tooltip content grows bigger, can't just keep it on top without accounting for fact content is dynamic :) */
  width:calc(100vw - 54px);
  background-color: white;
  display: none;
}

.relative-container:hover .tooltip {
  display: inline;
  cursor: pointer;
}

<div class='box'>
  <div class='relative-container'>
    <div class='box-content'>
      Hover for tooltip. I'm just an element with some text, so only hovering on the text brings up the tooltip.
    </div>
    <div class='tooltip'>
      I'm aligned with the top of the surrounding container and the left of the text, and I'm given some width so I'm mostly on top of the text (that is if the content isn't too big and screen size not too narrow! :) )
    </div>
  </div>
</div>

在实践中，您可能会发现将工具提示直接放在悬停的内容上是不可取的（如果它覆盖了它，用户在查看工具提示时就不能轻易地引用他们刚刚悬停的内容）。此外，如上所述，内容是流动的并且需要空间来运行，因此它会根据其长度和其他因素在某处溢出。

定位上下文

要点就是将您的相对容器视为绝对定位工具提示的参考点。在大多数情况下，您通常不需要或不想对其设置太多样式，只需给它一个相对位置，然后让子元素决定内部内容的大小/位置。

更多关于positioning context here。

显示/隐藏工具提示

另一个考虑因素是是否从文档流中删除工具提示（例如 display 属性）和/或更改可见性或不透明度。我刚刚使用display 来删除和添加工具提示，这是一种简单的方法。这确保了当悬停在工具提示本身占据的区域上时（它可能会延伸到原始悬停文本之外的红色边框）但在悬停在实际文本上之前，工具提示不会无意中显示。我还在悬停期间将工具提示光标设置为指针。

其他方法可能不在您要问的范围内，但认为值得一提的是这里有一些注意事项。

Answer 2

实现这一点的一种方法是制作一个 ::before 伪元素，它位于悬停文本的上方和旁边。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  padding-top: 20px;
  border-style: solid;
  border-color: red;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::before {
  content: "Wow, this is amazing, such an epic tooltip text";
  position: absolute;
  left: 25%;
  bottom: -75%;
  display: none;
  width: 500px;
  background-color: white;
  border: 2px solid pink;
}

.tooltip:hover::before {
  display: flex;
}

<div class='box'>
  <div class='tooltip'>
    Hover for tooltip
  </div>
</div>

Answer 3

您可以将溢出更改为可见，它会从边缘弹出。

.box {
  overflow: visible;
 }