wire:navigate reinitializing about alpine-tooltip

[ryangjchandler]

@marttheis As far as I know, when Livewire navigates and loads the new pages HTML, it will reinitialise Alpine and therefore the plugin should reinitialise too.

I believe the only exception to this is if the element is being persisted across pages.

[marttheis]

I was able to narrow it down a bit. When navigating to the exact url where the toolip is located, it works for continued navigation and everything is fine. However when I land on a URL without the tooltip and then navigate to the URL with the tooltip, it doesn't work because something was not initialized it seems. After a refresh on a page with a tooltips it works.

Maybe it messed up the x-data. I was not able to make the html links work with x-text="message", hence I skipped it and put it directly into the template. Is that correct?

<div class=" padbot flex justify-between items-baseline  w-full "> 
            
                    <div x-data="{ message: '' }" class="   text-tpri h2 flex ">Your notifications

                        <template    x-ref="template">

                             <p>Real time statistics of your portfolio. <a rel="noreferrer noopener" class="dont-break-out hover:underline text-p1" target="_blank" href="../documentation#docs1"> documentationofyourdocumentationstuffforyoutolearnmoreabout</a> Real time statistics Real time statistics of your portfolio. of your portfolio. Learn more in our <a rel="noreferrer noopener" class="dont-break-out hover:underline text-p1" target="_blank" href="../documentation#docs1"> documentation of your documentation stuff for you to learn more about</a></p>

                        </template>

                        <button ontouchstart:passive x-tooltip.interactive.debounce.200 x-tooltip="{content: () => $refs.template.innerHTML, allowHTML: true, theme: 'custom', placement: 'auto', inlinePositioning: false, appendTo: $root, interactive: true }" class="  padx text-tsecinv h2 flex justify-center items-center active:text-tpri hover:text-tpri  ">
                            <svg class=" h-5  " height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
                        </button>


                </div>

[marttheis]

I solved the isssue.

I have two main layouts. I only loaded the styles and css on one of them. Whenever I initially loaded the one without and navigated to the one with the styles and css it obviously needed a refresh.

[ryangjchandler]

The button element has 2 separate tooltip directives, that'll likely be a problem.

[marttheis]

That wasn't the reason but thank you for pointing it out. I will get rid of the tippy syntax and add the debounce into the other one.