Question

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

代码：

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

Answer 1

使用title

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

Answer 2

在 ::after 伪元素的帮助下，纯 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>

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

2 个答案: