Guide

基于 Tooltip 的功能引导提示系统，支持标题、描述和图片。通过锚点 ref 联动触发器与内容，适合在输入框、按钮等元素旁挂载一枚 tips 图标，hover 后展示说明信息。

Anatomy

• Guide引导根节点，继承 Tooltip 全部能力（含 touchable）
  • GuideAnchor将包装元素注册为锚点 ref，供 GuideTrigger 定位
  • GuideTrigger触发器，默认渲染 i-tripo:tips 图标并自动绑定锚点
  • GuideContent浮层内容，提供 title / description / img 等预设布局

基本用法

纯文字引导

hover GuideTrigger 图标时展示标题 + 描述。

提示词

<script setup lang="ts">
import { Guide, GuideAnchor, GuideContent, GuideTrigger } from '@tripo3d/design';
</script>

<template>
  <Guide>
    <GuideAnchor class="flex gap-2 items-center">
      <span>提示词</span>
      <GuideTrigger />
    </GuideAnchor>
    <GuideContent
      side="right"
      title="功能说明"
      description="描述您想要生成的 3D 模型外观、材质和风格。"
    />
  </Guide>
</template>

纯文字引导(无title)

hover GuideTrigger 图标时展示标题 + 描述。

提示词

<script setup lang="ts">
import { Guide, GuideAnchor, GuideContent, GuideTrigger } from '@tripo3d/design';
</script>

<template>
  <Guide>
    <GuideAnchor class="flex gap-2 items-center">
      <span>提示词</span>
      <GuideTrigger />
    </GuideAnchor>
    <GuideContent
      side="right"
      description="描述您想要生成的 3D 模型外观、材质和风格。"
    />
  </Guide>
</template>

带图片

img + title + description

HD Texture

<Guide>
  <GuideAnchor class="flex gap-2 items-center">
    <span>HD Texture</span>
    <GuideTrigger />
  </GuideAnchor>
  <GuideContent
    side="right"
    img="https://cdn.example.com/hd-texture.png"
    alt="HD Texture 示例"
    title="HD Texture"
    description="为模型生成更高分辨率的 PBR 贴图。"
  />
</Guide>

触摸设备

touchable

触摸设备上允许点击触发（而非仅 hover）。

点击或悬停

<Guide touchable>
  <GuideAnchor class="flex gap-2 items-center">
    <span>点击或悬停</span>
    <GuideTrigger />
  </GuideAnchor>
  <GuideContent title="触摸支持" description="在触摸设备上可通过点击查看" />
</Guide>

API

Guide Props

继承 TooltipProps，额外提供：

名称	类型	默认值	说明
touchable	boolean	false	触摸设备上支持点击触发

GuideTrigger Props

继承 Omit<TooltipTriggerProps, 'reference'>，默认内容为 i-tripo:tips 图标并自动绑定锚点 ref。

GuideAnchor

无 Props，将包装元素注册为锚点 ref。

GuideContent Props

名称	类型	默认值	说明
title	string	—	引导标题
description	string	—	引导描述文字
img	string	—	图片 URL
alt	string	—	图片 alt 文字
class	string	—	容器 class

GuideContent Slots

插槽	作用域	说明
default	—	自定义内容，替代内置的 img / title / description 布局