Tile UI Vue
Source code

Components

HoverCard

Hover card overlay.

Use HoverCard to show a preview when hovering a trigger.

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@tile-ui/vue';
 
export default function HoverCardDemo() {
	return (
		<HoverCard>
			<HoverCardTrigger class="component-preview__action">Hover me</HoverCardTrigger>

Registry install

pnpm dlx shadcn@latest add @tile-ui/hover-card

Package usage

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@tile-ui/vue';
 
<HoverCard>
	<HoverCardTrigger>Hover me</HoverCardTrigger>
	<HoverCardContent>Preview content.</HoverCardContent>
</HoverCard>

Highlights

  • Open and close delay
  • Side and align
  • Trigger and content

Registry dependencies

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

API reference

HoverCard

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

HoverCardTrigger

Prop Type Default
asChild boolean —

HoverCardContent

Prop Type Default
side 'top' | 'right' | 'bottom' | 'left' —
align 'start' | 'center' | 'end' —
sideOffset number —
PreviousFormNextInput