如何在Vue.js中实现带模糊背景的Tooltip？寻求替代方案

我之前也折腾过带模糊背景的Tooltip，用Vuetify的v-tooltip确实会碰到样式不好改的问题，分享几个不用给#body加灰色背景的可行方案：

方案1：利用CSS backdrop-filter自定义Tooltip内容 #

这个方法是最直接的，借助CSS原生的背景模糊属性，让Tooltip直接模糊其下方的页面内容，而非整个页面背景。你可以通过v-tooltip的插槽自定义内容样式：

<template>
  <v-tooltip bottom>
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-bind="attrs" v-on="on">Hover for blur tooltip</v-btn>
    </template>
    <div class="blurry-tooltip">
      这是带模糊背景的提示文本
    </div>
  </v-tooltip>
</template>

<style scoped>
.blurry-tooltip {
  background: rgba(255, 255, 255, 0.8); /* 半透明白色基底，必须半透明才能看到模糊效果 */
  backdrop-filter: blur(8px); /* 核心模糊属性 */
  -webkit-backdrop-filter: blur(8px); /* 兼容Chrome/Safari等webkit内核浏览器 */
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

关键说明：backdrop-filter需要Tooltip背景为半透明（使用rgba或transparent），否则模糊效果会被纯色背景遮挡。目前主流浏览器都已支持该属性，旧版浏览器可以用方案3的兼容写法。

方案2：完全自定义指令实现独立模糊Tooltip #

如果v-tooltip的默认样式限制太多，你可以自己写一个简单的Vue自定义指令，完全控制Tooltip的显示逻辑和样式：

<template>
  <button v-blur-tooltip="'自定义模糊提示内容'">Hover me</button>
</template>

<script>
export default {
  directives: {
    'blur-tooltip': {
      mounted(el, binding) {
        // 创建Tooltip元素
        const tooltipEl = document.createElement('div');
        tooltipEl.textContent = binding.value;
        tooltipEl.className = 'custom-blur-tooltip';
        document.body.appendChild(tooltipEl);

        // 鼠标进入时定位并显示Tooltip
        el.addEventListener('mouseenter', () => {
          const elRect = el.getBoundingClientRect();
          tooltipEl.style.left = `${elRect.left + elRect.width/2 - tooltipEl.offsetWidth/2}px`;
          tooltipEl.style.top = `${elRect.bottom + 8}px`;
          tooltipEl.style.opacity = '1';
        });

        // 鼠标离开时隐藏Tooltip
        el.addEventListener('mouseleave', () => {
          tooltipEl.style.opacity = '0';
        });
      }
    }
  }
}
</script>

<style>
.custom-blur-tooltip {
  position: absolute;
  background: rgba(30, 30, 30, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none; /* 避免Tooltip干扰鼠标交互 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
</style>

优势：完全脱离Vuetify组件的样式束缚，灵活度极高，适合需要定制复杂交互的场景。

方案3：修改Vuetify Tooltip的默认样式（兼容旧浏览器） #

如果你想保留v-tooltip的原有交互逻辑，只是替换背景样式，可以用::v-deep穿透Vuetify的作用域样式，同时给不支持backdrop-filter的浏览器提供降级方案：

<template>
  <v-tooltip bottom class="vuetify-blur-tooltip">
    <template v-slot:activator="{ on, attrs }">
      <v-btn v-bind="attrs" v-on="on">Vuetify原生Tooltip改模糊</v-btn>
    </template>
    <span>这是修改后的模糊提示</span>
  </v-tooltip>
</template>

<style scoped>
.vuetify-blur-tooltip ::v-deep .v-tooltip__content {
  background: rgba(255, 255, 255, 0.85) !important;
  /* 现代浏览器用backdrop-filter */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* 旧浏览器用伪元素模拟模糊 */
  position: relative;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* 伪元素模拟模糊的降级方案 */
@supports not (backdrop-filter: blur(0)) {
  .vuetify-blur-tooltip ::v-deep .v-tooltip__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: blur(8px);
    z-index: -1;
    margin: -8px; /* 扩大范围避免模糊边缘被截断 */
  }
}
</style>

说明：用@supports检测浏览器是否支持backdrop-filter，不支持时用伪元素复制背景并模糊，模拟类似效果。

内容的提问来源于stack exchange，提问作者Yab