vue自己实现tooltip

实现自定义 Tooltip 组件

在 Vue 中实现自定义 Tooltip 组件可以通过多种方式完成。以下是几种常见的方法：

使用原生 HTML 和 CSS

创建一个基础 Tooltip 组件，利用 CSS 控制显示和隐藏：

<template>
  <div class="tooltip-container">
    <slot name="trigger"></slot>
    <div class="tooltip" v-show="isVisible">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    showTooltip() {
      this.isVisible = true
    },
    hideTooltip() {
      this.isVisible = false
    }
  }
}
</script>

<style>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  z-index: 100;
  padding: 8px;
  background: #333;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  min-width: 100px;
  max-width: 200px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
</style>

使用 Vue 指令

创建一个指令式 Tooltip，可以更灵活地应用到任何元素上：

// tooltip-directive.js
export default {
  inserted(el, binding) {
    const tooltip = document.createElement('div')
    tooltip.className = 'vue-tooltip'
    tooltip.textContent = binding.value
    document.body.appendChild(tooltip)

    el.addEventListener('mouseenter', () => {
      const rect = el.getBoundingClientRect()
      tooltip.style.display = 'block'
      tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`
      tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`
    })

    el.addEventListener('mouseleave', () => {
      tooltip.style.display = 'none'
    })
  }
}

// 全局注册
import tooltip from './tooltip-directive'
Vue.directive('tooltip', tooltip)

使用 Vue 过渡效果

为 Tooltip 添加平滑的显示/隐藏过渡效果：

<template>
  <transition name="fade">
    <div class="tooltip" v-if="visible">
      <slot></slot>
    </div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

高级功能实现

动态定位

实现根据视口自动调整位置的 Tooltip：

methods: {
  updatePosition() {
    const triggerRect = this.$el.getBoundingClientRect()
    const tooltipRect = this.$refs.tooltip.getBoundingClientRect()

    let top, left

    // 根据视口空间决定显示位置
    if (triggerRect.top > tooltipRect.height) {
      // 上方有足够空间
      top = triggerRect.top - tooltipRect.height
    } else {
      // 显示在下方
      top = triggerRect.bottom
    }

    // 水平居中
    left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2

    // 确保不超出视口
    left = Math.max(0, Math.min(left, window.innerWidth - tooltipRect.width))
    top = Math.max(0, Math.min(top, window.innerHeight - tooltipRect.height))

    this.$refs.tooltip.style.left = `${left}px`
    this.$refs.tooltip.style.top = `${top}px`
  }
}

延迟显示

添加鼠标悬停延迟显示功能：

data() {
  return {
    showTimeout: null,
    hideTimeout: null
  }
},
methods: {
  handleMouseEnter() {
    clearTimeout(this.hideTimeout)
    this.showTimeout = setTimeout(() => {
      this.isVisible = true
    }, 300) // 300ms 延迟
  },
  handleMouseLeave() {
    clearTimeout(this.showTimeout)
    this.hideTimeout = setTimeout(() => {
      this.isVisible = false
    }, 200) // 200ms 延迟隐藏
  }
}

组件使用示例

基础组件使用方式

<template>
  <div>
    <custom-tooltip>
      <template v-slot:trigger>
        <button>悬停显示提示</button>
      </template>
      <template v-slot:content>
        这是一个自定义提示内容
      </template>
    </custom-tooltip>
  </div>
</template>

指令使用方式

<template>
  <div>
    <button v-tooltip="'这是指令式提示'">悬停按钮</button>
  </div>
</template>

样式定制建议

通过 props 传递样式选项实现高度可定制化：

<template>
  <div class="tooltip" :style="{
    backgroundColor: background,
    color: textColor,
    fontSize: size
  }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    background: {
      type: String,
      default: '#333'
    },
    textColor: {
      type: String,
      default: '#fff'
    },
    size: {
      type: String,
      default: '14px'
    }
  }
}
</script>

这些方法提供了从简单到复杂的多种实现方案，可以根据项目需求选择合适的实现方式。组件式实现更适合需要复杂交互的场景，而指令式实现则更轻量且易于全局使用。