Installation

pnpm dlx kliping@latest add tooltip

Usage

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

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger>Hover</TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/tooltip/tooltip.vue components/ui/tooltip/tooltip-content.vue components/ui/tooltip/tooltip-provider.vue components/ui/tooltip/tooltip-trigger.vue components/ui/tooltip/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Tooltip>
  <TooltipTrigger />
  <TooltipContent />
</Tooltip>
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

API Reference

Tooltip

Prop	Type	Default	Description
defaultOpen?	boolean	—	The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
open?	boolean	—	The controlled open state of the tooltip.
delayDuration?	number	—	Override the duration given to the Provider to customise the open delay for a specific tooltip.
disableHoverableContent?	boolean	—	Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.
disableClosingTrigger?	boolean	—	When true, clicking on trigger will not close the content.
disabled?	boolean	—	When true, disable tooltip
ignoreNonKeyboardFocus?	boolean	—	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.

Event	Payload	Description
@update:open	[value: boolean]	Emitted when the open state changes.

Slot	Props
#default	{ open: boolean; }

Data attribute	Value
[data-slot]	"tooltip"

TooltipContent

Prop	Type	Default	Description
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
ariaLabel?	string	—	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.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
align?	"start" | "end" | "center"	—	The preferred alignment against the trigger. May change when collisions occur.
side?	"bottom" | "top" | "right" | "left"	—	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
sideOffset?	number	4	The distance in pixels from the trigger.
alignOffset?	number	—	An offset in pixels from the start or end alignment options.
avoidCollisions?	boolean	—	When true, overrides the side and align preferences to prevent collisions with boundary edges.
collisionBoundary?	Element | (Element | null)[]	—	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.
collisionPadding?	number | Partial<Record<"bottom" | "top" | "right" | "left", number>>	—	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 }.
arrowPadding?	number	—	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.
sticky?	"partial" | "always"	—	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.
hideWhenDetached?	boolean	—	Whether to hide the content when the trigger becomes fully occluded.
positionStrategy?	"fixed" | "absolute"	—	The type of CSS position property to use.
updatePositionStrategy?	"always" | "optimized"	—	Strategy to update the position of the floating element on every animation frame.

Event	Payload	Description
@escapeKeyDown	[event: KeyboardEvent]	Emitted when Escape is pressed; call event.preventDefault() to keep it open.
@pointerDownOutside	[event: Event]	Emitted on a pointer down outside; call event.preventDefault() to keep it open.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"tooltip-content"

TooltipProvider

Prop	Type	Default	Description
delayDuration?	number	0	The duration from when the pointer enters the trigger until the tooltip gets opened.
skipDelayDuration?	number	—	How much time a user has to enter another trigger without incurring a delay again.
disableHoverableContent?	boolean	—	When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
disableClosingTrigger?	boolean	—	When true, clicking on trigger will not close the content.
disabled?	boolean	—	When true, disable tooltip
ignoreNonKeyboardFocus?	boolean	—	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.
content?	TooltipContentProps	—	Default settings that will be used by all tooltip components.

Slot	Props
#default	—

TooltipTrigger

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

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"tooltip-trigger"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Tooltip yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Tab	Opens/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.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --foreground, --radius.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.