Tooltips - Toggleable on mobile, hover on desktop

[TWithers]

On mobile tooltips don't work if you don't make them toggleable. But toggleable tooltips suck on desktop when you have a dozen of them on the page and want to quickly hover over them to find the info you are looking for.

The attribute is a PHP variable that switches what type of element to load. AFAIK there is no great PHP way to determine mobile vs not. CSS breakpoints are great and easy way to do it. It would be awesome if there was another option like "toggleable:mobile".

[jsabutis]

You can already get this without a breakpoint. I went through the tooltip Blade stub and the built JS to check, and toggleable plus hover together does what you're describing:

<flux:tooltip toggleable hover content="Some helpful info">
    <flux:button icon="information-circle" variant="ghost" size="sm" />
</flux:tooltip>

Here's why. toggleable swaps the rendered element from <ui-tooltip> to <ui-dropdown> and forwards the rest of your attributes onto it (stubs/resources/views/flux/tooltip/index.blade.php, the $toggleable branch). ui-dropdown binds a click toggle on its trigger, and it also checks for a hover attribute, which opens the panel on pointerenter.

The bit that makes it work per device is Flux's shared hover helper. It keeps a global record of the last interaction type, set from pointerdown as mouse or touch, and the pointerenter handler bails when that is touch. So a mouse gets hover, a finger gets tap-to-toggle, and tabbing to the trigger opens it once a key has been pressed.

A few caveats from reading the source rather than the docs. hover isn't in the documented prop list for flux:tooltip or flux:dropdown. It's plainly there in dist/flux.min.js, but treat it as something that could change without a changelog entry. toggleable also needs a real <button> in the slot, because ui-dropdown finds its trigger with querySelector('button') and just warns and gives up otherwise; plain tooltips take whatever the first child is. And the click toggle stays bound alongside hover, so on desktop clicking an already-open tooltip closes it, fine for an info icon, less fine if the trigger does something else on click. The interaction mode also starts as pointer and only flips to touch on the first pointerdown, so I'd test the very first tap after page load on a real device.

I'd still like toggleable="mobile" as an API, but a width breakpoint is the wrong signal for it. (hover: hover) and (pointer: coarse) are, and the runtime tracker is roughly approximating those already.