Add tooltip prop to radio variants

[kachelle]

The scenario

A segmented radio where one option needs a tooltip, for example a "-" segment meaning "Not applicable". The obvious way is to put a flux:tooltip inside the radio slot, but then only the label text triggers the tooltip. ui-tooltip is inline-flex and shrink-wraps its slot, so hovering the padding of the segment shows nothing, while the whole segment is clickable.

<?php

use Livewire\Volt\Component;

new class extends Component {
    public string $rating = '1';
};
?>

<div>
    <flux:radio.group variant="segmented" wire:model="rating">
        {{-- Hover zone is only the "-" character, not the segment --}}
        <flux:radio value="na">
            <flux:tooltip content="Not applicable">
                <span>-</span>
            </flux:tooltip>
        </flux:radio>
        <flux:radio value="1">Junior</flux:radio>
        <flux:radio value="2">Medior</flux:radio>
    </flux:radio.group>
</div>

The workaround today is class="h-full w-full items-center justify-center" on the tooltip, which every consumer has to rediscover.

The proposal

A tooltip prop on flux:radio, like flux:button and flux:toggle already have, so the tooltip wraps the radio itself and the hover zone equals the click zone:

<flux:radio.group variant="segmented" wire:model="rating">
    <flux:radio value="na" tooltip="Not applicable">-</flux:radio>
    <flux:radio value="1">Junior</flux:radio>
    <flux:radio value="2">Medior</flux:radio>
</flux:radio.group>

tooltip:position and tooltip:kbd come along for free.

The solution

The buttons, cards, pills and segmented variants add the three tooltip keys to their @blaze(unsafe: [...]) list and wrap <ui-radio> in the existing flux:with-tooltip helper, exactly as toggle.blade.php does:

<flux:with-tooltip :$attributes>
    <ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-segmented tabindex="-1">
        ...
    </ui-radio>
</flux:with-tooltip>

One layout decision. The segmented and cards groups are flex rows whose radios carry flex-1. With a tooltip, the ui-tooltip wrapper becomes the flex item instead, so both groups add [&>ui-tooltip]:flex-1 to keep segment widths identical with or without a tooltip. buttons and pills wrap freely and need nothing. The alternative was letting with-tooltip accept a class, but a group-level selector keeps the helper untouched and scoped to the two variants that stretch.

The default variant is left alone, since it is an inline-label control rather than a button-like one.

The ui-radio-group walker skips through non-radio descendants, so keyboard navigation and wire:model are unaffected by the extra wrapper. Verified in a Livewire app against the 2.18.0 tag, which has identical radio stubs to main.