Tooltip - 文字提示

Demo

Last Changed

7 minutes ago

tooltip/demo.vue

<template>
  <div class="flex flex-wrap items-center gap-3">
    <YlfTooltip content="悬停在云端之上 ☁️" side="top">
      <YlfButton variant="secondary">
        上方提示
      </YlfButton>
    </YlfTooltip>
    <YlfTooltip content="行为与定位都来自 reka-ui" side="bottom">
      <YlfButton variant="secondary">
        下方提示
      </YlfButton>
    </YlfTooltip>
    <YlfTooltip content="皮肤是云乐坊 token" side="right">
      <YlfButton variant="soft">
        右侧提示
      </YlfButton>
    </YlfTooltip>
  </div>
</template>

文字提示：定位与可访问性基于 reka-ui（floating 定位、延迟、aria-describedby），外观走 token。

Props

属性	说明	类型	默认值
content	提示文字	string	—
side	方向	top | right | bottom | left	top
delay	延迟（ms）	number	300

Slots

名称	说明
default	触发元素（as-child）
content	自定义提示内容