Question

所以，我需要显示许多行文本（用html编写），每行都带有“p”标记。该行中的文字后面应加上$符号（在$上有一些样式），当你将鼠标悬停在$符号上时（仅在$符号上方，而不是在该行的其余文本上），一个简单的html工具提示应该出现在html中确定的文本（每行不同的文本）。

我必须这样做，只有文本，工具提示标题（和css类）在p属性（html）中确定，其余应该在css中。 $符号必须在css中定义，所以如果需要，我可以在css中将其更改为另一个符号。

所以，我尝试了这个（在html文件中设计样式以简化演示）：

<html>
<head>
<title>test</title>
<style>
.my-tooltip::after {
   content: "$";
   font-size: 50%;
   vertical-align: top;
}
</style>
</head>
<body>
<p class="my-tooltip" title="text description">The Text</p>
</body>

但我的问题是，即使悬停在线的其余部分上，工具提示也会显示，而不仅仅是在$符号上方。我理解为什么会发生这种情况（因为“文本”也受到“我的工具提示”的影响），但我想不出一种正确的方法。有什么建议？感谢

Answer 1

试试这个

.tooltip {
    opacity: 1;
    margin: 35px 0 0 20px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip span:after{
    content: "$";
    float: right;
    cursor: pointer;
    margin: -3px 0 0 2px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.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;
}

.tooltip span:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

<div class="tooltip">Hover over me
    <span>
        <span class="tooltiptext">Tooltip text</span>
    </span>
</div>

Answer 2

我认为您无法使用::after执行此操作，而是可以这样做。

<html>
<head>
<title>test</title>
<style>
.my-tooltip span{
    font-size: 10px;
    color: #4c4c4c;
    position: relative;
    bottom: 1ex;
}
.my-tooltip{
width: fit-content;}
</style>
</head>
<body>
<div><p class="my-tooltip">The Text<span title="text description">$</span></p></div>
</body>

如何在鼠标悬停后显示内容和工具提示？

2 个答案: