鼠标悬停在按钮上时如何显示弹出文本

Question

对于下面发布的代码，它是 angular.ts 文件模板的一部分。 当鼠标悬停或 hover 或进入按钮区域时，我设法在浏览器的控制台上打印文本。 但我想在鼠标悬停或悬停在按钮上时将文本显示为弹出窗口

代码：

<button class="btn btn-sm btn-icon"   (click)="editTopography()" (mouseover)="onMouseover($event)" data-tooltip="text"> <clr-icon shape="pencil"></clr-icon></button>

Answer 1

使用标题

 <button title="I appear on hover">Hover me!</button>

Answer 2

在::after Pseudo-Element的帮助下，纯 css 中的工具提示。

 button{ position: relative; } button::after{ content: attr(data-title); position: absolute; background: #444; color: #fff; left: 0; top: 100%; font-size: 12px; width: 100px; padding: 5px; border-radius: 4px; transition: 300ms; opacity: 0; pointer-events: none; transform: translateY(15px); } button:hover::after{ opacity: 1; transform: translateY(5px); }

 <button data-title="I appear on hover">Hover me!</button>