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

Question

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

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

我不想为此使用Material UI。

寻找可重复使用的东西

Answer 1

如果您想要一个简单的工具提示，只能使用HTML和CSS。

简单的造型，我会让你自己做：）

rm -rf node_modules

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;
}