angular - 悬停时如何在按钮顶部显示工具提示？

Question

每当悬停 Angular2 中的按钮时，我想在顶部显示工具提示。

我们需要为此编写指令吗？

我不想为此使用 Material UI。

寻找可重用的东西

Answer 1

如果你想要一个简单的工具提示，只有HTML和CSS可以做到。

简单的样式，我会让你自己做:)

button {
  padding: 12px; 
  background: orange;
  border: 0;
  border-radius: 3px;
  font-weight: bold;
  position: relative;
}

button:hover:after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  margin-left: 5px;
  background: rgba(0,0,0,0.54);
  padding: 12px;
  border-radius: 3px;
}

<button data-tooltip="Hovered content">Hover me !</button>