Skip to content

Pro Component — This component requires an Aura UI Pro license.

Basic Usage

@johndoe
John Doe

John Doe

Full-stack developer

Building things with Laravel and Alpine.js. Open source contributor.

<x-aura::hover-card>
    <x-slot:trigger>
        <span class="font-semibold text-violet-600 underline decoration-dotted cursor-pointer">@johndoe</span>
    </x-slot:trigger>
    <x-slot:content>
        <div class="flex items-center gap-3">
            <x-aura::avatar initials="JD" size="lg" />
            <div>
                <p class="font-semibold">John Doe</p>
                <p class="text-sm text-gray-500">Full-stack developer</p>
            </div>
        </div>
        <p class="mt-2 text-sm text-gray-600">Building things with Laravel and Alpine.js.</p>
    </x-slot:content>
</x-aura::hover-card>

Props

Prop Type Default Description
position string 'top' Where the card appears relative to the trigger: top, bottom, left, right.
delay int 300 Delay in milliseconds before the card appears on hover.
width string 'md' Card width: sm (240px), md (320px), lg (400px).

Slots

Slot Description
trigger The element that the user hovers to reveal the card.
content The rich content displayed inside the hover card.

Examples

Bottom Position with Large Width

Aura UI Pro

A premium component library for Laravel and Livewire. Includes 60+ advanced components for building modern web applications.

60+ components Tailwind CSS 4 Alpine.js 
<x-aura::hover-card position="bottom" width="lg">
    <x-slot:trigger>
        <x-aura::button variant="outline">Hover for details</x-aura::button>
    </x-slot:trigger>
    <x-slot:content>
        <div class="space-y-3">
            <h4 class="font-semibold">Aura UI Pro</h4>
            <p class="text-sm text-gray-600">A premium component library for Laravel and Livewire.</p>
        </div>
    </x-slot:content>
</x-aura::hover-card>

User Profile Preview

This feature was created by

Jane Smith
Jane Smith

Jane Smith

Product Designer

on March 15. 

<p>
    This feature was created by
    <x-aura::hover-card position="top" width="sm" :delay="200">
        <x-slot:trigger>
            <span class="font-medium text-violet-600 underline decoration-dotted cursor-pointer">Jane Smith</span>
        </x-slot:trigger>
        <x-slot:content>
            <div class="text-center">
                <x-aura::avatar initials="JS" size="lg" />
                <p class="mt-2 font-semibold">Jane Smith</p>
                <p class="text-xs text-gray-500">Product Designer</p>
            </div>
        </x-slot:content>
    </x-aura::hover-card>
    on March 15.
</p>

Accessibility

  • The hover card uses role="tooltip" on the content container for semantic identification.
  • The trigger element includes aria-describedby linking to the card content.
  • The card appears on both mouseenter and focus, and hides on mouseleave and blur.
  • Content inside the card remains accessible to screen readers when visible.
  • The delay prop prevents accidental activation during casual mouse movement.