安裝
Terminal
pnpm dlx shadcn-vue add @admin/tooltipimport { AdminTooltip, AdminTooltipContent, AdminTooltipProvider, AdminTooltipTrigger,} from '@/components/admin/tooltip'用法
<script setup lang="ts">import { AdminButton } from '@/components/admin/button'import { AdminTooltip, AdminTooltipContent, AdminTooltipProvider, AdminTooltipTrigger} from '@/components/admin/tooltip'</script><template> <admin-tooltip-provider> <admin-tooltip> <admin-tooltip-trigger as-child> <admin-button>Hover me</admin-button> </admin-tooltip-trigger> <admin-tooltip-content>Tooltip content</admin-tooltip-content> </admin-tooltip> </admin-tooltip-provider></template>場景
四向擺放
<script setup lang="ts">import { AdminButton } from '@/components/admin/button'import { AdminTooltip, AdminTooltipContent, AdminTooltipProvider, AdminTooltipTrigger} from '@/components/admin/tooltip'</script><template> <admin-tooltip-provider> <div class="flex items-center gap-3"> <admin-tooltip> <admin-tooltip-trigger as-child> <admin-button size="small" variant="outline">Top</admin-button> </admin-tooltip-trigger> <admin-tooltip-content side="top">出現在上方</admin-tooltip-content> </admin-tooltip> <admin-tooltip> <admin-tooltip-trigger as-child> <admin-button size="small" variant="outline">Right</admin-button> </admin-tooltip-trigger> <admin-tooltip-content side="right">出現在右方</admin-tooltip-content> </admin-tooltip> <admin-tooltip> <admin-tooltip-trigger as-child> <admin-button size="small" variant="outline">Bottom</admin-button> </admin-tooltip-trigger> <admin-tooltip-content side="bottom">出現在下方</admin-tooltip-content> </admin-tooltip> <admin-tooltip> <admin-tooltip-trigger as-child> <admin-button size="small" variant="outline">Left</admin-button> </admin-tooltip-trigger> <admin-tooltip-content side="left">出現在左方</admin-tooltip-content> </admin-tooltip> </div> </admin-tooltip-provider></template>富文字內容
<script setup lang="ts">import { AdminButton } from '@/components/admin/button'import { AdminTooltip, AdminTooltipContent, AdminTooltipProvider, AdminTooltipTrigger} from '@/components/admin/tooltip'</script><template> <admin-tooltip-provider> <admin-tooltip> <admin-tooltip-trigger as-child> <admin-button variant="outline">Hover for details</admin-button> </admin-tooltip-trigger> <admin-tooltip-content class="max-w-60"> <div class="flex flex-col gap-1"> <span class="typo-title-small">預約提示</span> <span class="typo-caption-small"> 預約成立後系統會寄送確認信，可在個人頁面查看與取消。 </span> </div> </admin-tooltip-content> </admin-tooltip> </admin-tooltip-provider></template>API 參考
組成
<template> <admin-tooltip-provider> <admin-tooltip> <admin-tooltip-trigger>觸發元素</admin-tooltip-trigger> <admin-tooltip-content>說明文字</admin-tooltip-content> </admin-tooltip> </admin-tooltip-provider></template>admin-tooltip-provider
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
delayDuration | number | undefined | 0 | The duration from when the pointer enters the trigger until the tooltip gets opened. |
skipDelayDuration | number | undefined | 300 | How much time a user has to enter another trigger without incurring a delay again. |
disableHoverableContent | boolean | undefined | false | When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. |
disableClosingTrigger | boolean | undefined | false | When `true`, clicking on trigger will not close the content. |
disabled | boolean | undefined | false | When `true`, disable tooltip |
ignoreNonKeyboardFocus | boolean | undefined | false | 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 | undefined | — | Default settings that will be used by all tooltip components. |
class | unknown | — | — |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-tooltip
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
defaultOpen | boolean | undefined | — | The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state. |
open | boolean | undefined | — | The controlled open state of the tooltip. |
delayDuration | number | undefined | 700 | Override the duration given to the `Provider` to customise the open delay for a specific tooltip. |
disableHoverableContent | boolean | undefined | — | Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider. |
disableClosingTrigger | boolean | undefined | false | When `true`, clicking on trigger will not close the content. |
disabled | boolean | undefined | false | When `true`, disable tooltip |
ignoreNonKeyboardFocus | boolean | undefined | false | 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. |
class | unknown | — | — |
Events
| 名稱 | Payload | 說明 |
|---|---|---|
update:open | boolean | — |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | { open: boolean; } | — |
admin-tooltip-content
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
forceMount | boolean | undefined | — | Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries. |
ariaLabel | string | undefined | 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 | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
align | "start" | "end" | "center" | undefined | "center" | The preferred alignment against the trigger. May change when collisions occur. |
sideOffset | number | undefined | 4 | The distance in pixels from the trigger. |
side | "top" | "right" | "bottom" | "left" | undefined | "bottom" | The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. |
alignOffset | number | undefined | 0 | An offset in pixels from the `start` or `end` alignment options. |
avoidCollisions | boolean | undefined | true | When `true`, overrides the side and align preferences to prevent collisions with boundary edges. |
collisionBoundary | Element | (Element | null)[] | null | undefined | [] | 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<"top" | "right" | "bottom" | "left", number>> | undefined | 0 | 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 | undefined | 0 | 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" | undefined | "partial" | 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 | undefined | false | Whether to hide the content when the trigger becomes fully occluded. |
positionStrategy | "fixed" | "absolute" | undefined | — | The type of CSS position property to use. |
updatePositionStrategy | "always" | "optimized" | undefined | 'optimized' | Strategy to update the position of the floating element on every animation frame. |
class | ClassValue | — | 根元素之自訂 class |
Events
| 名稱 | Payload | 說明 |
|---|---|---|
escapeKeyDown | KeyboardEvent | — |
pointerDownOutside | Event | — |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-tooltip-trigger
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
reference | ReferenceElement | undefined | — | The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor. |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | unknown | — | — |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
更新紀錄
此元件尚無更新紀錄。