Vue/Nuxt.js中实现屏幕右下角Tooltip的定位问题求助

要实现鼠标悬停图片时，Tooltip固定显示在屏幕右下角的需求，根本不需要基于容器位置做复杂计算——position: fixed本身就是相对于浏览器视口定位的，直接设置固定的bottom和right值即可，完全不受容器位置变化影响。

方案一：纯CSS + Vue状态控制（推荐） #

这种方式最简洁，无需JS计算定位：

1. 给Tooltip写固定定位的基础样式：

.tooltip {
  position: fixed;
  bottom: 16px; /* 可自定义距离屏幕底部的间距 */
  right: 16px; /* 可自定义距离屏幕右侧的间距 */
  visibility: hidden;
  /* 补充样式优化显示 */
  background-color: #2d3748;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 9999;
}

.tooltip.visible {
  visibility: visible;
}

2. 在Vue模板中通过状态控制显示：

<template>
  <div class="object images">
    <img 
      :src="image.src" 
      @mouseenter="showTooltip(image)" 
      @mouseleave="hideTooltip"
      alt="示例图片"
    />
    <div class="tooltip" :class="{ visible: isTooltipShow }">
      {{ tooltipText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTooltipShow: false,
      tooltipText: ''
    }
  },
  methods: {
    showTooltip(image) {
      this.tooltipText = image.desc; // 替换为你需要展示的内容
      this.isTooltipShow = true;
    },
    hideTooltip() {
      this.isTooltipShow = false;
    }
  }
}
</script>

方案二：JS动态控制样式（不推荐，仅作参考） #

如果一定要通过JS设置样式，直接给fixed定位的元素设置固定的bottom和right即可，不需要依赖容器位置：

handleMouseEnter(image) {
  this.tooltipStyle = {
    position: 'fixed',
    bottom: '16px',
    right: '16px',
    visibility: 'visible',
    background: '#2d3748',
    color: '#fff',
    padding: '8px 12px',
    borderRadius: '4px',
    zIndex: 9999
  };
  this.tooltipText = image.desc;
},
handleMouseLeave() {
  this.tooltipStyle.visibility = 'hidden';
}

原有代码的问题分析 #

你之前的计算逻辑是让Tooltip的底部对齐容器底部、右侧对齐容器右侧（bottom: height - y、right: width - x），这本质是让Tooltip跟随容器移动，而非固定在屏幕右下角，所以才会出现定位偏差。

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