css - 工具提示被 div 纯 CSS 截断
问题描述
.color-palette {
border-top: 2px solid lightgrey;
max-height: 32vh;
z-index: 1;
background: rgba(0, 0, 0, 0.75);
width: 90vw;
bottom: 2.75rem;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
padding: 0.75rem 0.5rem;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0px 5px 10px black;
animation-name: zoomIn;
animation-duration: 0.5s;
}
button {
font-family: inherit;
font-size: 0.8rem;
line-height: 0.9;
width: 3.75rem;
height: 3.75rem;
margin: 0.45rem 0.3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.5s;
border: none;
outline: none;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 0px grey, 0px 3px 0px 0px lightgrey,
0px 8px 5px #999;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
font-family: "Comic Neue", cursive;
width: 8.5rem;
font-size: 1rem;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 500;
bottom: 110%;
left: 35%;
margin-left: -60px;
}
span {
display: none;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
display: block;
}
<div class="color-palette">
<button class="tooltip">
<span class="tooltiptext">Cannot duplicate</span>
</button>
</div>
我从https://www.w3schools.com/css/css_tooltip.asp获得了工具提示代码。我在这里尝试了答案:CSS tooltip getting cut off
并已申请overflow: visible
我color-palette
的,overflow-y: auto; overflow-x: hidden;
但发生了这种情况:
是的,工具提示有效,但我的按钮已经在 div (.color-palette) 之外。 我希望它能够在不删除工具提示的底部箭头、不向下移动工具提示、不增加 div 以使工具提示适合内部的情况下工作。 我想要的只是使工具提示重叠。该怎么办?
解决方案
尝试在类中将值从 110 更改为 95:
.tooltip .tooltiptext {
bottom: 95%;
}
更新:更改类中的最高值
.tooltip .tooltiptext::after {
top: 100%;
}
推荐阅读
- reactjs - 我无法创建新的反应应用程序我在下面收到这些错误我相信我的一切都是最新的
- flutter - 没有为“FirebaseMessaging”类型定义吸气剂“实例”
- r - 未找到 r 中的 TensorFlow
- api - instagram ?__a=1 不能在移动设备中工作,但是当我们在浏览器和邮递员中点击 api 时,它工作正常
- angular - Angular ngIf设置为true时不显示元素
- html - 如何得到
..
阻止重组文本? - java - 按钮重叠或消失
- python - 无法使用 Flask 和 Flask Migrate 在 Docker 中运行入口点脚本,即使它可以在终端中运行
- ssl - Centos8 SVN1.10.2 不能忽略ssl验证
- powerbi - 增量刷新 - 更新被解释为插入和删除,而不是实际更新