Tippy tooltips not working with Alpine.js' x-if, x-for, and x-bind attributes

[dfallman]

Loving Alpine. We're building something pretty great (we hope) with it but I've run into the following issue:

Maybe I'm missing something very basic but can't seem to get the tooltip lib Tippy to work within Alpine's x-if, x-for, and x-bind attributes. I don't get any error messages or anything, it's just being ignored.

Tippy (v6.x, using CDN dev) works great otherwise but anything inside either an x-for loop or a conditional x-if statement or inserted using :class is just ignored. I've tried both the <button data-tippy-content="Normal cupcake">Text</button> + tippy('[data-tippy-content]'); approach as well as the ...class="tippyNormal" and tippy('.tippyNormal', { content: 'Normal cupcake', });

So for me, the following works great:

<span x-show="isView.title">
   <a :href="book.uri" class="font-bold ml-0.5 tippyTitle" x-text="book.title"></a>
</span>

but not:

<template x-if="isView.title">
   <a :href="book.uri" class="font-bold ml-0.5 tippyTitle" x-text="book.title"></a>
</template>

What we think is going on -- (do let me know if this isn't right!) With Alpine.js, tags can only have a single child structure, and this structure isn't in the DOM until the template is run. Hence, with Alpine, if you have:

<template x-if="cupcake == true">
    <div class="tippyCupcake">Cupcake in the house</div>
</template>

As long as cupcake == false, getElementsByClassName('tippyCupcake') will return undefined, as there's no element in the DOM that has the class name tippyCupcake. Once cupcake == true however, the div gets inserted into the DOM.

So I wonder if what's going on is that when Tippy is initialized it:

• looks for all elements with the id/class/etc
• for each element discovered, create a tooltip

So when id/class/etc="tippyCupcake" above gets inserted into the DOM, there's no way for tippy to know as it has already done its parsing.

But how come Tippy works with x-show but not with x-bind, x-for, and x-if?

So regardless if the above is true, is there a way to get Tippy to work with Alpine? Can we manually ask Tippy to re-crawl the DOM or is there any other way to get Tippy running with Alpine?

(posted this on Tippy's GitHub board too but no response there so far)

Thanks for any help!

[danddanddand]

My short answer recommendation would just be to use x-show if you can.

Longer answer is if you really want to use tippy within x-if or x-for you probably have to do something to initialize it after it's been inserted into dom by Alpine. You could try something like

<template x-if="yourCondition">
    <a href="blah" x-init="tippy($el, { content: 'My tooltip!' } )"></a>
</template>

or you could do similar with x-effect. I've never used Tippy just glanced at docs now. We do use Popper JS which has similar API and we do memoize popper instance with component and initialize it in $nextTick using $refs but it's doing fetches to get preview so it's probably too complicated of example to be useful for you.

[dfallman]

x-init="tippy($el, { content: 'My tooltip!' } )"

This works -- awesome! Thanks.