溢出剪辑工具提示

Question

我正在使用 flex 在周围放置一些 div。当我尝试在其中一个具有 overflow-y: auto 的 div 中使用 tooltip 时，工具提示文本会导致 div 在不可见时溢出，并且在可见时被剪裁。

当工具提示文本有 position: relative.

时就是这样

如果不是，那么它没有被裁剪，也不会导致div溢出...但是它没有定位在正确的地方！

任何想法如何使它在正确的位置，而不是被剪裁？我在这里看到了几个看似相关的答案，但未能根据它们解决我的问题。

这是显示问题的非常简单的代码

.container {
  display: flex;
  flex-direction: row;
  width: 140px;
  height: 55px;
  /* the following style clips the tooltiptext (if it has position relative) */
  overflow-y: auto;
  background-color: aqua;
  /* to help see the overflow behaviour */
}

.container div {
  flex: 1;
}

.tooltip {
  width: 3em;
  height: 1em;
  background-color: yellow;
  position: relative; /* comment this out to fix clipping */
}

.tooltip .tooltiptext {
  width: 6em;
  height: 2em;
  position: absolute;
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
  /* The following is only good if position is relative */
  /* bottom: 125%; */
  /* left: 50%; */
  /* margin-left: -60px; */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

<html>

<head>
</head>

<body>
  <div class="container">
    <div>867-5309</div>
    <div class="tooltip">
      Busy
      <!-- If the position of the tooltiptext span is relative
          it causes the div to overflow - even when hidden,
          and the tooltiptext is clipped -->
      <span class="tooltiptext">When calling on Jan 2000</span>
    </div>
  </div>
</body>

</html>

Answer 1

在您的工具提示中添加 display: contents;。

.container {
  display: flex;
  flex-direction: row;
  width: 140px;
  height: 55px;
  /* the following style clips the tooltiptext (if it has position relative) */
  overflow-y: auto;
  background-color: aqua;
  /* to help see the overflow behaviour */
}

.container div {
  flex: 1;
}

.tooltip {
  display: contents;
  width: 3em;
  height: 1em;
  background-color: yellow;
  position: relative;
  /* comment this out to fix clipping */
}

.tooltip .tooltiptext {
  width: 6em;
  height: 2em;
  position: absolute;
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
  /* The following is only good if position is relative */
  /* bottom: 125%; */
  /* left: 50%; */
  /* margin-left: -60px; */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

<html>

<head>
</head>

<body>
  <div class="container">
    <div>867-5309</div>
    <div class="tooltip">
      Busy
      <!-- If the position of the tooltiptext span is relative
          it causes the div to overflow - even when hidden,
          and the tooltiptext is clipped -->
      <span class="tooltiptext">When calling on Jan 2000<
    </div>
  </div>
</body>

</html>

溢出剪辑工具提示

Overflow clips tooltip

html

css

overflow

tooltip

flexbox