{{-- An M3 plain tooltip: a short label for a control, in the inverse surface.

     Two ways in. Inside a component that already names its own anchor — `<x-button tooltip="…">`
     passes `anchor` — it is a bare popover. Standalone, it wraps its trigger:

         <x-tooltip text="Copy link"><button …>…</button></x-tooltip>

     It shows after a short hover on a pointer that can hover, at once on keyboard focus, and hides
     at once on a press or Escape; leaving or blurring lets it stand for M3's 1.5s. Only one
     tooltip is on screen at a time, as M3 asks. A phone has no hover, so a control there carries its
     words. The bubble is a `popover="manual"` in the top layer — never clipped by an
     `overflow: hidden` parent, never widening a scroll container — placed by CSS anchor
     positioning on `side` (`top`, `bottom`, `left`, `right`), flipping when there is no room.
     Drawn by resources/css/components/tooltip.css.

     It is aria-hidden: an icon button takes the same words as its aria-label, and a labelled
     control would otherwise read them twice. --}}

@props([
    'text',
    'side' => 'top',
    'anchor' => null,
])

@php
    $side = in_array($side, ['top', 'bottom', 'left', 'right'], true) ? $side : 'top';
    $standalone = $anchor === null;
    $anchor ??= '--material-tooltip-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
@endphp

@if ($standalone)
    <span data-md-tooltip-anchor style="anchor-name: {{ $anchor }}">
        {{ $slot }}
@endif

<span
    popover="manual"
    aria-hidden="true"
    x-data="materialTooltip"
    data-md-tooltip
    data-md-side="{{ $side }}"
    style="position-anchor: {{ $anchor }}"
>{{ $text }}</span>

@if ($standalone)
    </span>
@endif