# Hover Card

For sighted users to preview content available behind a link.

- Install: `php artisan blatui:add hover-card`
- Source: https://blatui.remix-it.com/r/hover-card.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`
- npm: `npm install -D @alpinejs/anchor`

## resources/views/components/ui/hover-card.blade.php

```blade
@props(['openDelay' => 400, 'closeDelay' => 100])

<div
    data-slot="hover-card"
    x-data="{ open: false, t: null,
        show() { clearTimeout(this.t); this.t = setTimeout(() => this.open = true, @js($openDelay)); },
        hide() { clearTimeout(this.t); this.t = setTimeout(() => this.open = false, @js($closeDelay)); } }"
    @mouseenter="show()"
    @mouseleave="hide()"
    @focusin="show()"
    @focusout="hide()"
    @keydown.escape="hide()"
    {{ $attributes->twMerge('relative inline-block') }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/hover-card-content.blade.php

```blade
@props([
    'align' => 'center',
    'side' => 'bottom',
    'sideOffset' => 4,
])

@php
    $placement = $side.($align === 'center' ? '' : '-'.$align);
    $anchorAttr = 'x-anchor.fixed.'.$placement.'.offset.'.$sideOffset.'="$refs.trigger"';
@endphp

<template x-teleport="body" wire:ignore>
    <div
        x-blat-dialog-layer
        x-show="open"
        x-cloak
        {!! $anchorAttr !!}
        @mouseenter="show()"
        @mouseleave="hide()"
        tabindex="-1"
        data-slot="hover-card-content"
        data-side="{{ $side }}"
        :data-state="open ? 'open' : 'closed'"
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        {{ $attributes->twMerge('bg-popover text-popover-foreground fixed z-50 w-64 origin-top rounded-md border p-4 shadow-md outline-hidden') }}
    >
        {{ $slot }}
    </div>
</template>
```

## resources/views/components/ui/hover-card-trigger.blade.php

```blade
<span
    x-ref="trigger"
    x-blat-trigger="{ focusable: true, state: null }"
    data-slot="hover-card-trigger"
    {{ $attributes->twMerge('inline-block') }}
>
    {{ $slot }}
</span>
```