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

<button id="myButton">悬停按钮</button>

#myButton {
  position: relative;
}

#myButton::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#myButton:hover::before {
  opacity: 1;
}

var button = document.getElementById("myButton");
button.setAttribute("data-tooltip", "这是一个工具提示");