Tooltip: overflow hidden is hold the child element content

huangapple
go评论84阅读模式
英文:

Tooltip: overflow hidden is hold the child element content

问题

I can help you with the Chinese translation for the provided text. Here it is:

问题描述

当我尝试将子元素移到所有内容的顶部时，我遇到了一个问题。我创建了一个沙盒来展示我想要做的事情（这只是一个模拟）：
https://codesandbox.io/s/tooltip-overflow-9yx29s?file=/mystyle.css:104-124

  • 我需要保留容器中的 overflow: hidden 属性。
  • 工具提示必须设置在容器 div 内部。
  1. div {
  2.   outline: 1px solid black;
  3. }
  5. .container {
  6.   position: relative;
  7.   height: 50px;
  8.   width: 500px;
  9.   overflow: hidden;
  10.   background-color: pink;
  11.   display: grid;
  12.   align-items: center;
  13. }
  15. .tooltip {
  16.   z-index: 9999;
  17.   top: 0;
  18.   background-color: lightcoral;
  19.   position: absolute;
  20.   height: 200px;
  21. }
  1. <div class="container">
  2.   <div class="tooltip">精美的工具提示内容</div>
  3. </div>

期望效果:

> 使用容器中的 overflow: hidden;

Tooltip: overflow hidden is hold the child element content

非常感谢您的支持。

英文:

The problem

I'm facing a problem when shifting the child element to the top of all content. I did a Sandbox to show what I'm trying to do (it's just a simulation):
https://codesandbox.io/s/tooltip-overflow-9yx29s?file=/mystyle.css:104-124

  • I need to keep the overflow: hidden property in the container.
  • The Tooltip must be set inside the container div

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. div {
  2.   outline: 1px solid black;
  3. }
  5. .container {
  6.   position: relative;
  7.   height: 50px;
  8.   width: 500px;
  9.   overflow: hidden;
  10.   background-color: pink;
  11.   display: grid;
  12.   align-items: center;
  13. }
  15. .tooltip {
  16.   z-index: 9999;
  17.   top:0;
  18.   background-color: lightcoral;
  19.   position: absolute;
  20.   height: 200px;
  21. }

<!-- language: lang-html -->

  1.     &lt;div class=&quot;container&quot;&gt;
  2.       &lt;div class=&quot;tooltip&quot;&gt;fancy Tooltip content&lt;/div&gt;
  3.     &lt;/div&gt;

<!-- end snippet -->

What I'm expecting:

> with overflow: hidden; in container

Tooltip: overflow hidden is hold the child element content

I appreciate any support

答案1

得分: 1

有一种方法。为“.container”添加父级div，然后从“.container”中移除“position: relative”，并将其添加到“.grand-parent”，您必须控制工具提示的高度。

  1. .grand-parent {
  2.   position: relative;
  3. }
  4. .container {
  5.   height: 50px;
  6.   width: 500px;
  7.   background-color: pink;
  8.   display: grid;
  9.   align-items: center;
  10.   overflow: hidden;
  11. }
  13. .tooltip {
  14.   z-index: 9999;
  15.   top: -20px;
  16.   background-color: lightcoral;
  17.   position: absolute;
  18.   height: fit-content;
  19. }
  1. <div class="grand-parent">
  2.   <div class="container clearfix">
  3.     <div class="tooltip">fancy Tooltip content</div>
  4.   </div>
  5. </div>
英文:

there is one way.
add parent div for ".container" and remove "position: relative" from ".container"
and add it to ".grand-parent" and you have to control the height of the tooltip.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .grand-parent {
  2.   position: relative;
  3. }
  4. .container {
  5.   height: 50px;
  6.   width: 500px;
  7.   background-color: pink;
  8.   display: grid;
  9.   align-items: center;
  10.   overflow: hidden;
  11. }
  13. .tooltip {
  14.   z-index: 9999;
  15.   top: -20px;
  16.   background-color: lightcoral;
  17.   position: absolute;
  18.   height: fit-content;
  19. }

<!-- language: lang-html -->

  1.  &lt;div class=&quot;grand-parent&quot;&gt;
  2.       &lt;div class=&quot;container clearfix&quot;&gt;
  3.         &lt;div class=&quot;tooltip&quot;&gt;fancy Tooltip content&lt;/div&gt;
  4.       &lt;/div&gt;
  5.     &lt;/div&gt;

<!-- end snippet -->

Tooltip: overflow hidden is hold the child element content

huangapple
  • 本文由 发表于 2023年6月29日 19:32:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76580634.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定