当前位置：首页 > VUE

vue实现popper

2026-01-07 23:46:56VUE

Vue 实现 Popper 的方法

使用 Tippy.js 库

Tippy.js 是一个轻量级的 Popper.js 封装库，提供丰富的工具提示功能。安装 Tippy.js 及其 Vue 封装：

npm install tippy.js @tippyjs/vue

在 Vue 组件中使用：

<template>
  <button v-tippy="'Tooltip content'">Hover me</button>
</template>

<script>
import { plugin as TippyPlugin } from '@tippyjs/vue'
import 'tippy.js/dist/tippy.css'

export default {
  directives: {
    tippy: TippyPlugin
  }
}
</script>

直接使用 Popper.js

Popper.js 是底层定位引擎，适合需要高度自定义的场景。安装 Popper.js：

vue实现popper

npm install @popperjs/core

示例实现：

<template>
  <div>
    <button ref="button">Reference</button>
    <div ref="tooltip" class="tooltip">Tooltip content</div>
  </div>
</template>

<script>
import { createPopper } from '@popperjs/core'

export default {
  mounted() {
    createPopper(this.$refs.button, this.$refs.tooltip, {
      placement: 'right'
    })
  }
}
</script>

<style>
.tooltip {
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
}
</style>

使用 Vue-Popper 组件

vue-popper 是专为 Vue 封装的组件：

vue实现popper

npm install vue-popper

使用示例：

<template>
  <popper trigger="hover" :options="{ placement: 'bottom' }">
    <button>Hover me</button>
    <div slot="content">Tooltip content</div>
  </popper>
</template>

<script>
import Popper from 'vue-popper'

export default {
  components: {
    Popper
  }
}
</script>

自定义实现

对于简单需求，可以创建自定义指令：

<template>
  <button v-popper="'Custom tooltip content'">Hover me</button>
</template>

<script>
export default {
  directives: {
    popper: {
      inserted(el, binding) {
        el.addEventListener('mouseenter', () => {
          const tooltip = document.createElement('div')
          tooltip.className = 'custom-tooltip'
          tooltip.textContent = binding.value
          document.body.appendChild(tooltip)

          const rect = el.getBoundingClientRect()
          tooltip.style.position = 'absolute'
          tooltip.style.left = `${rect.left}px`
          tooltip.style.top = `${rect.bottom + 5}px`

          el._tooltip = tooltip
        })

        el.addEventListener('mouseleave', () => {
          if (el._tooltip) {
            document.body.removeChild(el._tooltip)
            delete el._tooltip
          }
        })
      }
    }
  }
}
</script>

<style>
.custom-tooltip {
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
}
</style>