每当悬停时,如何在按钮顶部显示工具提示？

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>