测试工具提示的onHover事件

<button data-tooltip="这是一个按钮">按钮</button>

[data-tooltip] {
  position: relative;
  cursor: pointer;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  display: none;
}

[data-tooltip]:hover::after {
  display: block;
}

const tooltips = document.querySelectorAll('[data-tooltip]');

tooltips.forEach((tooltip) => {
  tooltip.addEventListener('mouseover', () => {
    tooltip.setAttribute('aria-describedby', 'tooltip');
    tooltip.nextElementSibling.style.display = 'block';
  });

  tooltip.addEventListener('mouseout', () => {
    tooltip.removeAttribute('aria-describedby');
    tooltip.nextElementSibling.style.display = 'none';
  });
});