Vue中实现基于Slot的Tooltip组件：嵌套Slot替代方案问询

方案一：基于具名Slot的实现（推荐） #

这是最贴合你需求的方案，完全利用Vue的Slot机制，无需预先定义组件，支持任意HTML或组件作为触发源与提示文本。

组件代码（ToolTip.vue） #

<template>
  <!-- 触发源容器，设置relative作为定位基准 -->
  <div class="tooltip-trigger">
    <!-- 渲染触发源Slot -->
    <slot name="source"></slot>
    <!-- 提示框，绝对定位相对于触发源容器 -->
    <div class="tooltip-content">
      <slot name="text"></slot>
    </div>
  </div>
</template>

<script setup>
// 可添加鼠标事件控制显示隐藏，示例用CSS hover实现
</script>

<style scoped>
.tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
  /* 默认隐藏，hover时显示 */
  display: none;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}

.tooltip-trigger:hover .tooltip-content {
  display: block;
}
</style>

使用示例 #

完全匹配你给出的预期用法：

<ToolTip>
  <template #source>
    <Icon /> <!-- 任意组件或HTML元素 -->
  </template>
  <template #text>
    <span> I am <b>bold</b> text </span> <!-- 带格式的HTML内容 -->
  </template>
</ToolTip>

方案二：基于动态组件的高阶组件写法 #

通过source属性传递组件，内部用<component :is="source">渲染触发源，提示文本用默认Slot传递。需注意：全局组件可直接传字符串，局部组件要传组件对象。

组件代码（ToolTip.vue） #

<template>
  <div class="tooltip-trigger">
    <!-- 动态渲染触发源组件 -->
    <component :is="source"></component>
    <div class="tooltip-content">
      <slot></slot> <!-- 默认Slot作为提示文本 -->
    </div>
  </div>
</template>

<script setup>
defineProps({
  source: {
    type: [String, Object],
    required: true
  }
})
</script>

<style scoped>
/* 样式同方案一 */
.tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
  display: none;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}

.tooltip-trigger:hover .tooltip-content {
  display: block;
}
</style>

使用示例 #

<!-- Icon为全局组件时 -->
<ToolTip source="Icon">
  <span> I am <b>bold</b> text </span>
</ToolTip>

<!-- Icon为局部组件时 -->
<script setup>
import Icon from './Icon.vue'
</script>
<ToolTip :source="Icon">
  <span> I am <b>bold</b> text </span>
</ToolTip>

方案对比与选择 #

• 方案一（具名Slot）：灵活性更高，支持多元素组合的触发源，无需关心组件注册状态，完全契合Slot的设计初衷，是优先推荐的方案。
• 方案二（动态组件）：写法更简洁，但触发源只能是单个组件，无法直接传递HTML片段（需额外处理），灵活性不如方案一。

你之前尝试的嵌套Slot写法Vue不支持，因为Slot是父组件传递内容的入口，不能在一个Slot内部嵌套渲染另一个Slot。正确的做法是在组件模板中分别渲染两个独立Slot，并将提示框置于触发源容器内，通过position:relative和position:absolute实现相对定位。

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