溢出剪辑工具提示

发布于 2025-01-09 00:22:04 字数 2094 浏览 2 评论 0原文

我正在使用 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>

原文

I'm using flex to position some divs around. When I try using a tooltip inside one of the divs that has overflow-y: auto, the tooltip text causes the div to overflow even while invisible, and is clipped when visible.

This is so when the tooltip text has position: relative.

If not, then it is not clipped, and it doesn't cause the div to overflow... but it is not positioned at the right place!

Any ideas how to make it be on the right place, and not be clipped? I have seen a couple of answers here that seem related, but didn't manage to fix my problem based on them.

Here's a very simple code that displays the problem

.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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放低过去 2025-01-16 00:22:04

在工具提示上添加 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<https://stackoverflow.com/questions/71229271/overflow-clips-tooltip#/span>
    </div>
  </div>
</body>

</html>

Add display: contents; on your tooltip.

.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<https://stackoverflow.com/questions/71229271/overflow-clips-tooltip#/span>
    </div>
  </div>
</body>

</html>

回复收藏 0 原文

~没有更多了~