封装原生 popover

[heycn]

封装原生 popover

JavaScript

const createPopover = text => {
  if (!text) return null
  const popoverWrapper = document.createElement('div')
  const popover = document.createElement('div')
  popoverWrapper.classList.add('popoverWrapper')
  popover.innerHTML = text
  popover.classList.add('popover')
  popover.style.maxWidth = '240px'
  popoverWrapper.appendChild(popover)
  return popoverWrapper
}

// 当 DOMContentLoaded 事件触发时执行的回调函数
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有具有 data-popover-text 属性的元素，并遍历每个元素
  const elementsWithPopover = document.querySelectorAll('[data-popover-text]')
  elementsWithPopover.forEach(element => {
    // 获取 element 元素的 data-popover-text 属性值，并赋值给 popoverText 变量
    const popoverText = element.dataset.popoverText
    // 创建一个包含指定文本内容的 popover 元素，并赋值给 popover 变量
    const popover = createPopover(popoverText)
    // 如果 popover 存在，则执行以下代码
    if (popover) {
      // 隐藏 popover
      popover.style.opacity = '0'
      popover.style.pointerEvents = 'none'
      // 将 popover 添加到 element 的父元素中
      const parent = element.parentElement
      parent.classList.add('relative') // 自动添加相对定位
      parent.style.cursor = 'pointer' // 自动添加鼠标指针样式
      parent.appendChild(popover)
      // 当鼠标移入 element 元素时，显示 popover，并计算 popover 的位置
      element.addEventListener('mouseenter', () => {
        popover.style.opacity = '1'
        popover.style.transition = 'opacity 0.35s'
        popover.style.pointerEvents = 'auto'
        const { top, left, height } = element.getBoundingClientRect()
        const popoverHeight = popover.offsetHeight
        const newTop = top + window.pageYOffset - (popoverHeight - height) / 2
        const newLeft = left - popover.offsetWidth
        popover.style.top = `${newTop}px`
        popover.style.left = `${newLeft - 12}px`
      })
      // 当鼠标移出 element 元素时，隐藏 popover
      element.addEventListener('mouseleave', () => {
        popover.style.opacity = '0'
        popover.style.transition = 'opacity 0.35s'
        popover.style.pointerEvents = 'none'
      })
    }
  })
})

如何使用

在 HTML 里使用：

<aside>
  <p data-popover-text="This is popover content...">Hover Me!</p>
</aside>

效果预览