Preview

Installation

npx sigma-ui@latest add tooltip

Usage

<script setup lang="ts">
import { Button } from '@/components/ui/button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <Button variant="outline">
          Hover
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

• TooltipProvider shares the open delay between tooltips. Wrap your app, or a section of it, once.
• Use delayDuration on Tooltip or TooltipProvider to change how long the pointer must rest before the tooltip opens.
• Use as-child on TooltipTrigger to make your own focusable element the trigger.

Examples

No Delay

Set delayDuration to 0 to open the tooltip as soon as the trigger is hovered.

<template>
  <TooltipProvider>
    <Tooltip :delay-duration="0">
      <TooltipTrigger as-child>
        <Button variant="outline">
          Hover
        </Button>
      </TooltipTrigger>
      <TooltipContent side="right">
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

API Reference

Tooltip

Props

Prop	Type	Default
defaultOpen The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.	boolean	-
open The controlled open state of the tooltip.	boolean	-
delayDuration Override the duration given to the Provider to customise the open delay for a specific tooltip.	number	700
disableHoverableContent Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.	boolean	-
disableClosingTrigger When true, clicking on trigger will not close the content.	boolean	false
disabled When true, disable tooltip	boolean	false
ignoreNonKeyboardFocus Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the :focus-visible selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.	boolean	false

Events

Event	Payload
update:open Event handler called when the open state of the tooltip changes.	[value: boolean]

Slots

Slot	Scope
default The content of the component.	-

TooltipContent

Props

Prop	Type	Default
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
ariaLabel By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.	string	String
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
side The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.	"top" | "right" | "bottom" | "left"	"bottom"
sideOffset The distance in pixels from the trigger.	number	4
align The preferred alignment against the trigger. May change when collisions occur.	"center" | "start" | "end"	"center"
alignOffset An offset in pixels from the start or end alignment options.	number	0
avoidCollisions When true, overrides the side and align preferences to prevent collisions with boundary edges.	boolean	true
collisionBoundary The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.	Element | (Element | null)[] | null	[]
collisionPadding The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.	number | Partial<Record<"top" | "right" | "bottom" | "left", number>>	0
arrowPadding The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.	number	0
sticky The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.	"partial" | "always"	"partial"
hideWhenDetached Whether to hide the content when the trigger becomes fully occluded.	boolean	false
positionStrategy The type of CSS position property to use.	"absolute" | "fixed"	-
updatePositionStrategy Strategy to update the position of the floating element on every animation frame.	"always" | "optimized"	'optimized'

Events

Event	Payload
escapeKeyDown Event handler called when focus moves to the destructive action after opening. It can be prevented by calling event.preventDefault	[event: KeyboardEvent]
pointerDownOutside Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

TooltipTrigger

Props

Prop	Type	Default
reference The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.	ReferenceElement	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

TooltipProvider

Props

Prop	Type	Default
delayDuration The duration from when the pointer enters the trigger until the tooltip gets opened.	number	700
skipDelayDuration How much time a user has to enter another trigger without incurring a delay again.	number	300
disableHoverableContent When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.	boolean	false
disableClosingTrigger When true, clicking on trigger will not close the content.	boolean	false
disabled When true, disable tooltip	boolean	false
ignoreNonKeyboardFocus Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the :focus-visible selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.	boolean	false
content Default settings that will be used by all tooltip components.	TooltipContentProps	-

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the Tooltip WAI-ARIA design pattern. Reka UI opens the tooltip on hover and keyboard focus, and links it to the trigger with aria-describedby.

Key	Description
Tab	Opens or closes the tooltip without delay.
Space	If open, closes the tooltip without delay.
Enter	If open, closes the tooltip without delay.
Escape	If open, closes the tooltip without delay.