HoverCard

Home Hover Card

The HoverCard component shows supplementary information when a user hovers over a specific element. It’s great for previewing content or providing helpful context without clicking.


<?php

use Lib\PHPXUI\{Avatar, AvatarImage, Button, HoverCard, HoverCardContent, HoverCardTrigger,AvatarFallback};

?>

<HoverCard>
    <HoverCardTrigger asChild="true">
        <Button variant="link">@nextjs</Button>
    </HoverCardTrigger>
    <HoverCardContent class="w-80">
        <div class="flex justify-between space-x-4">
            <Avatar>
                <AvatarImage src="https://github.com/shadcn.png" />
            </Avatar>
            <div class="space-y-1">
                <h4 class="text-sm font-semibold">@nextjs</h4>
                <p class="text-sm">
                    The React Framework – created and maintained by @vercel.
                </p>
                <div class="flex items-center pt-2">
                    <CalendarDays class="mr-2 h-4 w-4 opacity-70" />
                    <span class="text-xs text-muted-foreground">
                        Joined December 2021
                    </span>
                </div>
            </div>
        </div>
    </HoverCardContent>
</HoverCard>

Installation

npm

npx phpxui add HoverCard

Usage

use Lib\PHPXUI\{
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
}

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

HoverCard const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add HoverCard'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

@nextjs

Installation

Usage