BreezeUI
  • 简体中文

    • 文字提示 (Tooltip)

    常用于展示鼠标 hover 时的提示信息。

    组件特性

    • 📐 12 个弹出方位：支持 top、bottom、left、right 及其组合方向。
    • ⏱️ 手动控制：支持手动控制显示/隐藏状态，可自定义延时。
    • 🎨 富文本内容：支持自定义延时、富文本内容等高级用法。
    • 🌗 暗黑模式：基于 BrPopover 自动适配暗黑模式。
    • 🎨 主题定制：通过 BrConfigProvider 全局配置或 Tailwind CSS 类名局部配置。

    基础用法

    <script setup lang="ts">
import { BrTooltip, BrTooltipTrigger, BrTooltipContent, BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center justify-center p-10">
    <BrTooltip>
      <BrTooltipTrigger as-child>
        <BrButton variant="outline">Hover me</BrButton>
      </BrTooltipTrigger>
      <BrTooltipContent>
        <p>Add to library</p>
      </BrTooltipContent>
    </BrTooltip>
  </div>
</template>

    位置

    支持 12 个不同的方向。

    <script setup lang="ts">
import { BrTooltip, BrTooltipTrigger, BrTooltipContent, BrButton } from '@breezeui/vue'
const positions = [
  'top-start', 'top', 'top-end',
  'right-start', 'right', 'right-end',
  'bottom-end', 'bottom', 'bottom-start',
  'left-end', 'left', 'left-start',
] as const
</script>

<template>
  <div class="grid grid-cols-3 gap-4 p-10 max-w-[600px] mx-auto place-items-center">
    <template v-for="pos in positions" :key="pos">
      <BrTooltip>
        <BrTooltipTrigger as-child>
          <BrButton variant="outline" class="w-24 capitalize">{{ pos.replace('-', ' ') }}</BrButton>
        </BrTooltipTrigger>
        <BrTooltipContent :side="pos.split('-')[0]" :align="pos.split('-')[1] || 'center'">
          <p>Tooltip on {{ pos }}</p>
        </BrTooltipContent>
      </BrTooltip>
    </template>
  </div>
</template>

    高级用法

    支持手动控制、自定义延时、富文本内容等。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrTooltip, BrTooltipTrigger, BrTooltipContent, BrButton } from '@breezeui/vue'
import { Info, Bell } from 'lucide-vue-next'

const isOpen = ref(false)
</script>

<template>
  <div class="flex flex-col gap-8 p-10 items-center">
    <!-- Manual Trigger -->
    <div class="space-y-2 text-center">
      <h3 class="text-sm font-medium">Manual Control (Click)</h3>
      <BrTooltip :open="isOpen">
        <BrTooltipTrigger as-child>
          <BrButton variant="outline" @click="isOpen = !isOpen">
            {{ isOpen ? 'Click to Close' : 'Click to Open' }}
          </BrButton>
        </BrTooltipTrigger>
        <BrTooltipContent>
          <p>Manually controlled tooltip</p>
        </BrTooltipContent>
      </BrTooltip>
    </div>

    <!-- Icon Content + No Delay -->
    <div class="space-y-2 text-center">
      <h3 class="text-sm font-medium">No Delay + Icon</h3>
      <BrTooltip :delay-duration="0">
        <BrTooltipTrigger as-child>
          <BrButton size="icon" variant="ghost" class="rounded-full">
            <Info class="h-5 w-5" />
            <span class="sr-only">Info</span>
          </BrButton>
        </BrTooltipTrigger>
        <BrTooltipContent class="flex items-center gap-2">
          <Bell class="h-4 w-4 text-blue-500" />
          <span>Rich content with icon</span>
        </BrTooltipContent>
      </BrTooltip>
    </div>
  </div>
</template>

    主题定制

    通过 BrConfigProvider 全局配置或 Tailwind CSS 类名局部配置。

    全局定制

    在 BrConfigProvider 中配置 popover、radius、shadow 等变量。

    <script setup lang="ts">
import { BrConfigProvider, BrTooltip, BrTooltipTrigger, BrTooltipContent, BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col gap-8 p-10 items-center">
    <!-- Custom Theme via ConfigProvider -->
    <div class="space-y-2 text-center">
      <h3 class="text-sm font-medium">Config Provider Theme</h3>
      <BrConfigProvider
:theme="{
        popover: '#0f172a',
        popoverForeground: '#f8fafc',
        radius: '1rem',
        shadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
        zTooltip: 100
      }">
        <BrTooltip>
          <BrTooltipTrigger as-child>
            <BrButton>Hover for Custom Theme</BrButton>
          </BrTooltipTrigger>
          <BrTooltipContent>
            <p>Custom background, radius, shadow</p>
          </BrTooltipContent>
        </BrTooltip>
      </BrConfigProvider>
    </div>

    <!-- Custom Tailwind Classes -->
    <div class="space-y-2 text-center">
      <h3 class="text-sm font-medium">Tailwind Override</h3>
      <BrTooltip>
        <BrTooltipTrigger as-child>
          <BrButton variant="outline">Hover for Override</BrButton>
        </BrTooltipTrigger>
        <BrTooltipContent class="bg-blue-500 text-white shadow-xl rounded-none border-blue-600">
          <p>Custom Tailwind Styles</p>
        </BrTooltipContent>
      </BrTooltip>
    </div>
  </div>
</template>

    API

    BrTooltip

    属性类型默认值说明
    defaultOpenbooleanfalse默认是否打开。
    openbooleanundefined受控的打开状态。
    delayDurationnumber300鼠标移入触发的延迟时间（毫秒）。
    disableHoverableContentbooleanfalse是否禁用鼠标悬停在内容上时保持打开。

    BrTooltipTrigger

    属性类型默认值说明
    asChildbooleanfalse是否作为子元素渲染。

    BrTooltipContent

    属性类型默认值说明
    side'top' | 'right' | 'bottom' | 'left''top'弹出位置。
    sideOffsetnumber4距离触发元素的偏移量。
    align'start' | 'center' | 'end''center'对齐方式。
    avoidCollisionsbooleantrue是否避免碰撞边界。