BrutxUI

English

简体中文

English

简体中文

Appearance

Tooltip ​

A neo-brutalist tooltip built on reka-ui's Tooltip primitive, showing informational text on hover. TooltipProvider provides global configuration for all descendant tooltips, supporting custom delay, controlled mode, and more.

Demo ​

Preview

Installation ​

pnpm dlx brutx-vue@latest add tooltip

Usage ​

Basic Usage ​

vue
<script setup>
import { TooltipRoot as Tooltip, TooltipTrigger } from 'reka-ui'
import { TooltipProvider, TooltipContent, Button } from 'brutx-ui-vue'
</script>

<template>
    <TooltipProvider>
        <Tooltip>
            <TooltipTrigger as-child>
                <Button variant="outline">Hover me</Button>
            </TooltipTrigger>
            <TooltipContent>
                <p>This is a tooltip</p>
            </TooltipContent>
        </Tooltip>
    </TooltipProvider>
</template>

Using with Provider ​

Wrap your application (or a section) with TooltipProvider to enable tooltips:

vue
<script setup>
import { TooltipProvider } from 'brutx-ui-vue'
</script>

<template>
    <TooltipProvider>
        <router-view />
    </TooltipProvider>
</template>

Trigger Delay ​

Control the delay from when the pointer enters the trigger element to when the tooltip opens via the delayDuration prop on TooltipProvider (in milliseconds). You can also override the global setting on individual Tooltip components via delayDuration.

vue
<TooltipProvider :delay-duration="0">
    <Tooltip>
        <TooltipTrigger>
            <Button>Show Immediately</Button>
        </TooltipTrigger>
        <TooltipContent>
            <p>No delay</p>
        </TooltipContent>
    </Tooltip>
</TooltipProvider>

<TooltipProvider>
    <Tooltip :delay-duration="1500">
        <TooltipTrigger>
            <Button>Long Delay</Button>
        </TooltipTrigger>
        <TooltipContent>
            <p>Overridden to 1500ms</p>
        </TooltipContent>
    </Tooltip>
</TooltipProvider>

Controlled Mode ​

Control the tooltip's visibility via open and @update:open:

vue
<script setup>
import { ref } from 'vue'
import { TooltipRoot as Tooltip, TooltipTrigger } from 'reka-ui'
import { TooltipProvider, TooltipContent, Button } from 'brutx-ui-vue'

const isOpen = ref(false)
</script>

<template>
    <TooltipProvider>
        <Tooltip v-model:open="isOpen">
            <TooltipTrigger as-child>
                <Button variant="outline">Controlled Tooltip</Button>
            </TooltipTrigger>
            <TooltipContent>
                <p>Current state: {{ isOpen ? 'Open' : 'Closed' }}</p>
            </TooltipContent>
        </Tooltip>
    </TooltipProvider>
</template>

Sub-components ​

ComponentDescription
TooltipProviderContext provider (required ancestor component)
TooltipRoot component (re-exported from reka-ui's TooltipRoot)
TooltipTriggerElement that triggers the tooltip on hover
TooltipContentTooltip content panel

API Composition ​

This package’s TooltipProvider and TooltipContent are local wrappers; their complete props are listed in the API reference below. Tooltip and TooltipTrigger are Reka UI primitives, whose primitive props are retained here.

TooltipProvider ​

Re-exported from reka-ui's TooltipProvider. Provides global configuration for all descendant tooltips.

Tooltip ​

Re-exported from reka-ui's TooltipRoot. Manages the state of a single tooltip.

PropTypeDefaultDescription
defaultOpenboolean—Initial open state in uncontrolled mode
openboolean—Controlled open state
delayDurationnumber700Overrides the Provider's delay duration for this individual tooltip
disableHoverableContentboolean—Inherited from Provider, can be overridden individually
disableClosingTriggerbooleanfalseWhen true, clicking the trigger element will not close the tooltip
disabledbooleanfalseWhen true, disables this tooltip
ignoreNonKeyboardFocusbooleanfalseWhen true, only keyboard focus triggers

TooltipTrigger ​

Trigger component that opens the tooltip on hover or focus.

PropTypeDefaultDescription
asstring | Component'button'Element type to render
asChildboolean—Render styles onto the child element

TooltipContent ​

Tooltip content panel with neo-brutalist styling. Rendered via Portal to body by default.

Reka UI Primitive Events ​

Tooltip ​

EventPayloadDescription
update:openvalue: booleanEmitted when the open state changes

TooltipContent ​

EventPayloadDescription
escapeKeyDownKeyboardEventEmitted when the Escape key is pressed, can prevent default behavior
pointerDownOutsideEventEmitted when pressing a pointer outside, can prevent default behavior

Reka UI Primitive Slots ​

Tooltip ​

SlotScopeDescription
default{ open: boolean }Scoped slot, provides current open state

TooltipTrigger / TooltipContent ​

SlotScopeDescription
default—Default slot content

API Reference ​

TooltipContent

TooltipContent — Props
NameTypeDefaultDescription
class
string | undefined
undefined
Additional CSS classes applied to the tooltip content panel rendered through the portal.
Details

Declared type

string | undefined

Default value details

Declaration
undefined

Source: packages/ui/src/components/tooltip/TooltipContent.vue

Resolved value
undefined

Source

TooltipContent.vue:13

packages/ui/src/components/tooltip/TooltipContent.vue

to
string | HTMLElement | undefined
undefined
Selects the portal target using a CSS selector or HTMLElement. When omitted, the content is portaled to body.
Details

Declared type

string | HTMLElement | undefined

Default value details

Declaration
undefined

Source: packages/ui/src/components/tooltip/TooltipContent.vue

Resolved value
undefined

Source

TooltipContent.vue:14

packages/ui/src/components/tooltip/TooltipContent.vue

forceMount
boolean | undefined
—
Keeps the content mounted while the tooltip is closed so a Vue animation library can control its transition.
Details

Declared type

boolean | undefined

Literal values

  • false
  • true

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

ariaLabel
string | undefined
—
Provides an accessible name for the content panel when its contents do not adequately describe it.
Details

Declared type

string | undefined

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

asChild
boolean | undefined
—
Merges the content panel props and behavior into its single child, which replaces the default panel element.
Details

Declared type

boolean | undefined

Literal values

  • false
  • true

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

as
AsTag | Component | undefined
—
Selects the HTML tag or Vue component for the content panel; asChild takes precedence when both are set.
Details

Declared type

AsTag | Component | undefined

Literal values

  • "a"
  • "button"
  • "div"
  • "form"
  • "h2"
  • "h3"
  • "img"
  • "input"
  • "label"
  • "li"
  • "nav"
  • "ol"
  • "p"
  • "span"
  • "svg"
  • "template"
  • "ul"

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

sideOffset
number | undefined
6
Sets the pixel distance between the content panel and its trigger.
Details

Declared type

number | undefined

Default value details

Declaration
floatingContentSideOffsets.tooltip

Source: packages/ui/src/components/tooltip/TooltipContent.vue

Resolved value
6

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

align
"center" | "start" | "end" | undefined
—
Sets the preferred alignment of the content against its trigger; collision handling may adjust it.
Details

Declared type

"center" | "start" | "end" | undefined

Literal values

  • "center"
  • "end"
  • "start"

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

collisionPadding
number | Partial<Record<"right" | "bottom" | "left" | "top", number>> | undefined
6
Sets padding from the collision boundary. A number applies to every edge; an object can set each edge in pixels.
Details

Declared type

number | Partial<Record<"right" | "bottom" | "left" | "top", number>> | undefined

Default value details

Declaration
floatingContentSideOffsets.tooltip

Source: packages/ui/src/components/tooltip/TooltipContent.vue

Resolved value
6

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

side
"right" | "bottom" | "left" | "top" | undefined
—
Sets the preferred side of the trigger for the content; collision handling may flip it to another side.
Details

Declared type

"right" | "bottom" | "left" | "top" | undefined

Literal values

  • "bottom"
  • "left"
  • "right"
  • "top"

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

alignOffset
number | undefined
—
Adds a pixel offset along the start or end alignment axis.
Details

Declared type

number | undefined

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

avoidCollisions
boolean | undefined
—
Adjusts the preferred side and alignment to keep content inside the collision boundary.
Details

Declared type

boolean | undefined

Literal values

  • false
  • true

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

collisionBoundary
Nullable
Element | (Element | null)[] | null | undefined
—
The element or elements used as collision boundaries. The viewport is used by default.
Details

Declared type

Element | (Element | null)[] | null | undefined

Literal values

  • null

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

arrowPadding
number | undefined
—
Sets padding between the arrow and content edges so the arrow does not overlap rounded corners.
Details

Declared type

number | undefined

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

sticky
"partial" | "always" | undefined
—
Sets stickiness on the alignment axis. partial keeps content inside while the trigger remains partly visible; always keeps it inside throughout.
Details

Declared type

"partial" | "always" | undefined

Literal values

  • "always"
  • "partial"

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

hideWhenDetached
boolean | undefined
—
Hides the content when its trigger becomes fully detached from the viewport or boundary.
Details

Declared type

boolean | undefined

Literal values

  • false
  • true

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

positionStrategy
"fixed" | "absolute" | undefined
—
Selects the floating panel’s fixed or absolute CSS positioning strategy.
Details

Declared type

"fixed" | "absolute" | undefined

Literal values

  • "absolute"
  • "fixed"

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

updatePositionStrategy
"always" | "optimized" | undefined
—
Selects how the floating position is updated: always updates each animation frame, while optimized uses scheduled updates.
Details

Declared type

"always" | "optimized" | undefined

Literal values

  • "always"
  • "optimized"

Default value details

Not declared
—

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

TooltipContent — Slots
NameSignature or typeDescription
#default
{}
Renders the explanatory content inside the tooltip panel.
Details

Declared type

{}

Source

TooltipContent.vue

packages/ui/src/components/tooltip/TooltipContent.vue

TooltipProvider

TooltipProvider — Props
NameTypeDefaultDescription
delayDuration
number | undefined
400
The delay in milliseconds between pointer entry and opening a tooltip; defaults to 400.
Details

Declared type

number | undefined

Default value details

Declaration
DEFAULT_DELAY_DURATION

Source: packages/ui/src/components/tooltip/TooltipProvider.vue

Resolved value
400

Source

TooltipProvider.vue

packages/ui/src/components/tooltip/TooltipProvider.vue

skipDelayDuration
number | undefined
—
The number of milliseconds after closing a tooltip during which entering another trigger skips its delay.
Details

Declared type

number | undefined

Default value details

Not declared
—

Source

TooltipProvider.vue

packages/ui/src/components/tooltip/TooltipProvider.vue

disableHoverableContent
boolean | undefined
—
When enabled, the tooltip closes as the pointer leaves its trigger instead of remaining open while the pointer enters its content.
Details

Declared type

boolean | undefined

Literal values

  • false
  • true

Default value details

Not declared
—

Source

TooltipProvider.vue

packages/ui/src/components/tooltip/TooltipProvider.vue

disableClosingTrigger
boolean | undefined
—
When enabled, clicking a trigger does not close an open tooltip.
Details

Declared type

boolean | undefined

Literal values

  • false
  • true

Default value details

Not declared
—

Source

TooltipProvider.vue

packages/ui/src/components/tooltip/TooltipProvider.vue

disabled
boolean | undefined
—
Disables all tooltips managed by this provider.
Details

Declared type

boolean | undefined

Literal values

  • false
  • true

Default value details

Not declared
—

Source

TooltipProvider.vue

packages/ui/src/components/tooltip/TooltipProvider.vue

ignoreNonKeyboardFocus
boolean | undefined
—
Ignores focus not produced by keyboard navigation; only focus matching :focus-visible can open a tooltip.
Details

Declared type

boolean | undefined

Literal values

  • false
  • true

Default value details

Not declared
—

Source

TooltipProvider.vue

packages/ui/src/components/tooltip/TooltipProvider.vue

content
TooltipContentProps | undefined
—
Provides default positioning and mounting options for TooltipContent instances under this provider; an individual content component can override them.
Details

Declared type

TooltipContentProps | undefined

Default value details

Not declared
—

Source

TooltipProvider.vue

packages/ui/src/components/tooltip/TooltipProvider.vue

TooltipProvider — Slots
NameSignature or typeDescription
#default
{}
Contains Tooltip components managed by this provider’s settings.
Details

Declared type

{}

Source

TooltipProvider.vue

packages/ui/src/components/tooltip/TooltipProvider.vue

Accessibility ​

  • Keyboard: Press Escape to close the tooltip
  • ARIA Attributes: Tooltip content is readable by screen readers; ariaLabel provides a more precise screen reader description
  • Focus Management: Tooltip appears on hover and focus; supports ignoreNonKeyboardFocus to avoid triggering on non-keyboard interactions

Brute force builds.

© 2026 BrutxUI · MIT License