Tile UI Vue
Source code

Components

Tooltip

Tooltip overlay.

Use Tooltip to show contextual help on hover or focus.

import { Tooltip, TooltipTrigger, TooltipContent } from '@tile-ui/vue';
 
export default function TooltipDemo() {
	return (
		<Tooltip>
			<TooltipTrigger class="component-preview__action">Hover me</TooltipTrigger>

Registry install

pnpm dlx shadcn@latest add @tile-ui/tooltip

Package usage

import { Tooltip, TooltipTrigger, TooltipContent } from '@tile-ui/vue';
 
<Tooltip>
	<TooltipTrigger>Hover me</TooltipTrigger>
	<TooltipContent>Help text.</TooltipContent>
</Tooltip>

Highlights

  • Provider with delay
  • Trigger and content
  • Side and offset

Registry dependencies

Item Purpose
tooltip Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

TooltipProvider

Prop Type Default
delayDuration number —

Tooltip

Prop Type Default
open boolean —
defaultOpen boolean —
onOpenChange (open: boolean) => void —

TooltipTrigger

Prop Type Default
asChild boolean —

TooltipContent

Prop Type Default
side 'top' | 'right' | 'bottom' | 'left' —
sideOffset number —
PreviousToggleGroupNextComposables