js button 提示信息

<button title="点击这里执行操作">按钮</button>

<button id="myButton">按钮</button>
<div id="tooltip" style="display:none; position:absolute; padding:5px; background:white; border:1px solid black;">这是提示信息</div>

<script>
  var button = document.getElementById('myButton');
  var tooltip = document.getElementById('tooltip');

  button.addEventListener('mouseover', function(event) {
    tooltip.style.display = 'block';
    tooltip.style.left = event.pageX + 'px';
    tooltip.style.top = event.pageY + 'px';
  });

  button.addEventListener('mouseout', function() {
    tooltip.style.display = 'none';
  });
</script>

<button id="customTooltipButton">按钮</button>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('[data-tooltip]');

    buttons.forEach(function(button) {
      var tooltipText = button.getAttribute('data-tooltip');

      button.addEventListener('mouseover', function(event) {
        var tooltip = document.createElement('div');
        tooltip.className = 'tooltip';
        tooltip.textContent = tooltipText;
        document.body.appendChild(tooltip);

        tooltip.style.left = event.pageX + 'px';
        tooltip.style.top = event.pageY + 'px';
      });

      button.addEventListener('mouseout', function() {
        var tooltips = document.querySelectorAll('.tooltip');
        tooltips.forEach(function(tooltip) {
          tooltip.remove();
        });
      });

      button.addEventListener('mousemove', function(event) {
        var tooltips = document.querySelectorAll('.tooltip');
        tooltips.forEach(function(tooltip) {
          tooltip.style.left = event.pageX + 'px';
          tooltip.style.top = event.pageY + 'px';
        });
      });
    });
  });
</script>

<style>
  .tooltip {
    position: absolute;
    padding: 5px;
    background: #333;
    color: white;
    border-radius: 5px;
    z-index: 1000;
  }
</style>