gpt4 book ai didi

html - css 仅动态大小工具提示

转载 作者:太空宇宙 更新时间:2023-11-04 06:15:37 28 4
gpt4 key购买 nike

我想我已经接近了,但我正在努力让工具提示完全按照我的意愿工作。我有一个动态构建的 HTML 表格,我想获得 TD 内容的工具提示。为了性能,它需要是纯 css(不基于 javascript 或事件)。我希望工具提示在悬停时出现在 TD 的上方和中心,并且下方有一个箭头。我有这个工作,但我的问题是工具提示的内容有时可以是几行,这会增加工具提示的高度。当发生这种情况时,工具提示仍位于 TD 的中心但不再位于其上方,它已向下移动。无论高度如何,我怎样才能拥有一个始终高于 TD 相同数量的工具提示。请帮忙。

html 示例 td:

<td>
<div class="tooltip">
<span>My Tooltip Text</span>
Text in the TD
</div>
</td>

我的CSS:

.tooltip span
{
display: none;
color: #000;
text-decoration: none;
}

.tooltip:hover span
{
display: block;
position: absolute;
background-color: #292929;
margin: -2.8em -1em;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
white-space: pre-line;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: left;
}

.tooltip:hover span::after
{
top: 100%;
left: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid #292929;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-width: 10px;
margin-left: -40px;
}

最佳答案

例如

@keyframes pulse {
0% {
opacity: .5;
transform: translate(-50%, -100%) scale(.5);
}
50%{
opacity: 1;
transform: translate(-50%, -100%) scale(1.2);
}
100% {
transform: translate(-50%, -100%) scale(1);
}
}

.tooltip span
{
color: #000;
text-decoration: none;
transform: translate(-50%, -100%) scale(.5);
position: absolute;
background-color: #292929;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 1rem;
font-weight: 400;
text-align: center;
box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
width: max-content;
max-width: 200px;
top:0;
left:50%;
margin-top: -18px;
visibility: hidden;
opacity: 0;
}
.tooltip:hover{
position: relative;
}
.tooltip:hover span
{
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%) scale(1);
animation: pulse 1s;
}

.tooltip:hover span::after
{
top: 100%;
left: 50%;
transform: translateX(-50%);
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top: 8px solid #292929;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-width: 10px;
}
<br>
<br>

<br>
<br>

<table border="1">
<tr>
<td>Hello</td>
<td>
<div class="tooltip">
<span>My Tooltip Text</span>
Cool text
</div>
</td>
<td>
<div class="tooltip">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
Long text
</div>
</td>
</tr>
</table>

关于html - css 仅动态大小工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55987286/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com