英文:
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内部。
div {
outline: 1px solid black;
}
.container {
position: relative;
height: 50px;
width: 500px;
overflow: hidden;
background-color: pink;
display: grid;
align-items: center;
}
.tooltip {
z-index: 9999;
top: 0;
background-color: lightcoral;
position: absolute;
height: 200px;
}
<div class="container">
<div class="tooltip">精美的工具提示内容</div>
</div>
期望效果:
> 使用容器中的 overflow: hidden;
非常感谢您的支持。
英文:
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: hiddenproperty in the container. - The Tooltip must be set inside the container
div
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {
outline: 1px solid black;
}
.container {
position: relative;
height: 50px;
width: 500px;
overflow: hidden;
background-color: pink;
display: grid;
align-items: center;
}
.tooltip {
z-index: 9999;
top:0;
background-color: lightcoral;
position: absolute;
height: 200px;
}
<!-- language: lang-html -->
<div class="container">
<div class="tooltip">fancy Tooltip content</div>
</div>
<!-- end snippet -->
What I'm expecting:
> with overflow: hidden; in container
I appreciate any support
答案1
得分: 1
有一种方法。为“.container”添加父级div，然后从“.container”中移除“position: relative”，并将其添加到“.grand-parent”，您必须控制工具提示的高度。
.grand-parent {
position: relative;
}
.container {
height: 50px;
width: 500px;
background-color: pink;
display: grid;
align-items: center;
overflow: hidden;
}
.tooltip {
z-index: 9999;
top: -20px;
background-color: lightcoral;
position: absolute;
height: fit-content;
}
<div class="grand-parent">
<div class="container clearfix">
<div class="tooltip">fancy Tooltip content</div>
</div>
</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 -->
.grand-parent {
position: relative;
}
.container {
height: 50px;
width: 500px;
background-color: pink;
display: grid;
align-items: center;
overflow: hidden;
}
.tooltip {
z-index: 9999;
top: -20px;
background-color: lightcoral;
position: absolute;
height: fit-content;
}
<!-- language: lang-html -->
<div class="grand-parent">
<div class="container clearfix">
<div class="tooltip">fancy Tooltip content</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论