<分区>
在 Html 中，如果我们需要在将鼠标悬停在文本上时显示文本，它的 Css 应该是什么。 这是需要完成的任务，类似于给定的图像。 Sample of task that needs to be done
<mat-expansion-panel-header [collapsedHeight]="'40px'" [expandedHeight]="'40px'"
style="margin-left: 50px;border-bottom: 1px solid #4c4c4c;">
<mat-panel-title
style="text-decoration: none;color: #FFFFFF;font-size: 15px;font-family: sans-serif;font-weight: 700;width: 209px;overflow: hidden;text-overflow: ellipsis; word-break: break-all;white-space: nowrap;"
>
{{category.CategoryName}}
</mat-panel-title>
<mat-panel-description *ngIf="!category.Expanded"
style="margin-left: -4px;margin-right: -6px;">
<mat-icon style="color: #FFFFFF;">keyboard_arrow_down</mat-icon>
</mat-panel-description>
<mat-panel-description *ngIf="category.Expanded"
style="margin-left: -4px;margin-right: -6px;">
<mat-icon style="color: #FFFFFF;">keyboard_arrow_up</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
最佳答案
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me toolTip using Css
<span class="tooltiptext">Tooltip text</span>
</div>
<p title="someText">This is a paragraph with Tooltip set using Title attribute.</p>
</body>
</html>可以有两种不同的方式来创建“工具提示”
以上示例将向您展示用法，有关更多详细信息和自定义，您可以访问 here .
关于javascript - 将鼠标悬停在文本上时更改带有文本的指针，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55177001/