Has anyone integrated tippy.js or similar library with livewire/alpine?

#1

I want some pretty tooltips, and am trying to develop a strategy that will allow me to easily use an html attribute on any element to invoke tooltips - however, if i understand it correctly wire:ignore is gonna conflict with wire:model.

Am really loving the laravel/livewire/alpinejs/tailwind stack, and am looking for a solution that doesn’t have me writing a ton of code for each element. Has anyone done this? I’m definitely not a javascript guru, so please be kind if I’m missing some super obvious.

#2

Styles not included.

<div x-data="{ open: false}">
    <div x-on:mouseover="open = true" x-on:mouseleave="open = false">
        Hover over me!
    </div>
    <div x-show="open">
        I'm a tooltip!
    </div>
</div>
#3

I appreciate the answer, but I already know I can do that with alpine. For this project I need to do a ton of tooltips, on a variety of element types, and am looking to just pass a tooltip attribute. I already have a blade component that implements the alpine solution you suggest specifically for input fields, but looking specifically for something like tippy so I can just pass an attribute to any element, and I’m looking to keep the code as simple as possible for maintenance.

Has anyone integrated a popover/tooltip library?

#4

Like you highlighted before wire:model and wire:ignore won’t work together. Why not just conditionally add the tooltip to your blade components?

@props(['tooltip' => false])

@if ($tooltip)
<div x-data="{ open: false}">
    <div x-on:mouseover="open = true" x-on:mouseleave="open = false">
        {{ $trigger ?? 'Hover over me!' }}
    </div>
    <div x-show="open">
        {{ $tip ?? 'I\'m a tooltip' }}
    </div>
</div>
@endif

<x-your-element tooltip>
    <x-slot name="trigger">Free advice</x-slot>
    <x-slot name="tip">Don't leave a lightbulb in your backpocket</x-slot>
</x-your-element>

Disclaimer: This is all off the top of my head, it might need some tweaking.

1 Like
#5

I do already have it on some input components. Looking for the library because i have a variety of tags it will be used for, I didn’t want to have to write components for each of them just for tooltips. Also, tippy has some very nice features - that would be a lot of code to have to add to every component.