js求鼠标移动到文字上提示信息

<p title="这是提示信息">鼠标移动到这里查看提示</p>

<p id="hoverText">鼠标移动到这里查看提示</p>
<div id="tooltip" style="display:none; position:absolute; padding:5px; background:white; border:1px solid black;">这是提示信息</div>

#tooltip {
  background-color: #fff;
  border: 1px solid #000;
  padding: 5px;
  position: absolute;
  z-index: 1000;
  display: none;
}

document.addEventListener('DOMContentLoaded', function() {
  var hoverText = document.getElementById('hoverText');
  var tooltip = document.getElementById('tooltip');

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

  hoverText.addEventListener('mousemove', function(event) {
    tooltip.style.left = event.pageX + 'px';
    tooltip.style.top = event.pageY + 'px';
  });

  hoverText.addEventListener('mouseout', function() {
    tooltip.style.display = 'none';
  });
});