BreezeUI
  • English

    • Tooltip

    A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

    Component Features

    • 📐 12 Positions: Supports top, bottom, left, right and their combinations.
    • ⏱️ Manual Control: Supports manual show/hide control with customizable delay.
    • 🎨 Rich Content: Supports manual control, customizable delay, and rich text content.
    • 🌗 Dark Theme: Based on BrPopover for automatic dark mode adaptation.
    • 🎨 Theme Customization: Via BrConfigProvider for global theming or TailwindCSS for local overrides.

    Basic Usage

    <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>

    Positions

    Tooltip supports 12 positions using the side and align props on BrTooltipContent.

    <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>

    Advanced Usage

    Features like manual control, custom delay, and rich content.

    <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>

    Theming

    Customize the tooltip appearance globally using BrConfigProvider or locally using Tailwind CSS classes.

    Global Customization

    You can configure popover, popoverForeground, radius, shadow, and zTooltip in BrConfigProvider to affect all tooltips.

    <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

    The root component that manages the tooltip state.

    PropTypeDefaultDescription
    defaultOpenbooleanfalseThe open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
    openbooleanundefinedThe controlled open state of the tooltip.
    delayDurationnumber300The duration from when the mouse enters a trigger until the tooltip opens.
    disableHoverableContentbooleanfalseWhen true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.

    BrTooltipTrigger

    The button that triggers the tooltip.

    PropTypeDefaultDescription
    asChildbooleanfalseChange the default rendered element for the one passed as a child, merging their props and behavior.

    BrTooltipContent

    The component that pops out when the tooltip is open.

    PropTypeDefaultDescription
    side'top' | 'right' | 'bottom' | 'left''top'The preferred side of the trigger to render against when open.
    sideOffsetnumber4The distance in pixels from the trigger.
    align'start' | 'center' | 'end''center'The preferred alignment against the trigger.
    alignOffsetnumber0An offset in pixels from the "start" or "end" alignment options.
    avoidCollisionsbooleantrueWhen true, overrides the side and align preferences to prevent collisions with boundary edges.