js中popover的用法

<button id="popoverButton">显示Popover</button>
<div id="popover" class="popover">
  这是一个popover示例。
</div>

.popover {
  display: none; /* 默认隐藏 */
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

document.addEventListener('DOMContentLoaded', function() {
  var popoverButton = document.getElementById('popoverButton');
  var popover = document.getElementById('popover');

  popoverButton.addEventListener('mouseenter', function() {
    // 显示popover并设置位置
    popover.style.display = 'block';
    popover.style.left = popoverButton.offsetLeft + 'px';
    popover.style.top = popoverButton.offsetTop + popoverButton.offsetHeight + 'px';
  });

  popoverButton.addEventListener('mouseleave', function() {
    // 隐藏popover
    popover.style.display = 'none';
  });

  // 可选：点击页面其他地方时隐藏popover
  document.addEventListener('click', function(event) {
    if (!popover.contains(event.target) && event.target !== popoverButton) {
      popover.style.display = 'none';
    }
  });
});