Rich tooltips, mobile enabled/responsive

[mauritskorse]

I have been working on making the tooltips more advanced. It'd be great if there would be native support for some (or all) of the features I have added.

Aim / Requirements

The main aim was to have a wikipedia like tooltip that is shown and rendered based on the 'trigger' that is hovered or tapped.
It should:

• support rich interactive content (buttons, images, etc).
• load content dynamically: because there can be many links on a large page, I don't want to prerender all tooltips, but load them dynamically based on the link that is hovered. That meant that I only want to have one tooltip element on the page that is populated on the fly with the correct data.
• native mobile support: meaning that when tapping on the link when using touch, the tooltip is opened as a flyout from the bottom, or in case the orientation of the device is in landscape the flyout will appear on the right or left of the screen (also see Orientation based flyout position on mobile #1018)
• have some delay: as the tooltips can become quite large and therefore intrusive when they appear immediately. Adding a delay allowed for adding a prefetch when the mouse enters the link, such that the content is loaded once the tooltip is shown.

Approach

I have tried a couple of approaches (combining the dialog and tooltip elements). But in the end I had to tinker a bit with the Flux javascript library as well. In the end I have chosen for a single popover element that renders either as tooltip or as flyout depending on pointer and screen orientation.
I have added a method to the custom flux element (richtooltip) that can register new triggers with various callbacks. The implementation of the delay allows for prefetching the new tooltips content before it is shown.

Result so far

The vids aren't very smooth, but it does give an idea:

Screen.Recording.2025-02-06.141051.mp4

Screen.Recording.2025-02-06.160702.mp4

Example implementation

<div class="p-4 flex-col flex prose" x-data="hasRichTooltips">
    <p> some content with links </p>

    <flux:richttooltip delay="100" name="richttooltip" mobilePosition="right" interactive x-ref="wikitip"> 
        <x-slot name="actions">
            <flux:button size="sm" variant="subtle" icon="tabler.stack-push"></flux:button>
        </x-slot>
        <div class="animate-pulse space-y-4" wire:loading> 
            <div class="bg-zinc-300/50 rounded-full h-4 w-40"></div>
            <div class="space-y-2">
                <div class="bg-zinc-300/50 rounded-full h-3 w-60"></div>
                <div class="bg-zinc-300/50 rounded-full h-3 w-64"></div>
                <div class="bg-zinc-300/50 rounded-full h-3 w-52"></div>
            </div>
        </div>
        <div wire:loading.remove class="space-y-4">
            @if(isset($item))
                @php 
                $item = $item->get(); 
                @endphp
                <flux:heading size="base">{{ $item->title }}</flux:heading>
                <flux:text size="sm" class="font-400">{{ $item->summary }}</flux:text>
                <div class="flex flex-row">	
                    <flux:spacer />
                    <flux:button variant="subtle" size="xs" href="{{ $item->url }}" icon-trailing="arrow-right">
                        Verder lezen
                    </flux:button>
                </div>    
            @endif  
        </div>
    </flux:richttooltip>  
</div>

Alpine.data('hasRichTooltips', (settings = {} ) => ({
    component: null,

    init() {
        this.component = this.$wire.el ?? document.querySelector('body');
        this.parseLinks();
    },
    parseLinks()
    {
        const links = this.component.querySelectorAll('a[href]:not(.anchor)');

        links.forEach(link => {
            const href = link.getAttribute('href');
            const match = [...href.matchAll(/^\/wiki\/([^\s\/#]+)\/([^\s\/#]+)/g)];

            if (match && match[0].length == 3) {
                result = match[0];
                let type = result[1];
                let slug = result[2];

                $refs.wikitip.addTrigger(link, {
                    gain(evt){
                        // preload the tooltip content
                        $wire.$call('tooltip', type, slug);
                    }, 
                    active(evt){
                        // callback when tooltip is visible
                    },
                    lose(evt){
                       // callback when we're losing focus and may soon close the tooltip
                    },
                    lost(evt){
                        // lost focus, tooltip is closed
                    },
		    // delay: [200, 0] // optionally pass delay here (in, out)
                });
            }
        });  
    }
}));

Additional features

I have also added a next() and previous() method when the triggers are registered. This means you can add a button on a tooltip to open the next or previous tooltip. This is quite nice for interactive walk-throughs of you application.

Dynamic rendering

As this tooltip supports dynamic rendering, the same approach could be used for dynamic rendering modals or dropdowns for rows in large tables (#381)

[CeriseGoutPelican]

I would love to see this implemented!