Repeated tooltips in <tr><td> does not show

[tanthammar]

I have a table with icons in a td. I have wrapped an svg icon with the Popper tag.

The tooltip is only visible on the first row in the table. The following rows does not show any tooltip.

This is in my blade file

<span {{ Popper::arrow('round')->pop($column->tooltip)  }}>
     @svg('light/exclamation-triangle', 'td-icon ')
</span>

This is the generated html

<span data-tippy="Size is missing" data-tippy-arrow="true" data-tippy-arrowtype="round">
    <svg class="svg-icon td-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M270.2 160h35.5c3.4 0 6.1 2.8 6 6.2l-7.5 196c-.1 3.2-2.8 5.8-6 5.8h-20.5c-3.2 0-5.9-2.5-6-5.8l-7.5-196c-.1-3.4 2.6-6.2 6-6.2zM288 388c-15.5 0-28 12.5-28 28s12.5 28 28 28 28-12.5 28-28-12.5-28-28-28zm281.5 52L329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.8 0 60-40 41.5-72zM528 480H48c-12.3 0-20-13.3-13.9-24l240-416c6.1-10.6 21.6-10.7 27.7 0l240 416c6.2 10.6-1.5 24-13.8 24z"></path></svg>
</span>

[andcarpi]

Gonna check it. I also need to update the package assets.

[tanthammar]

I finally solved it. Do not think (but not sure) if it was related to this package. I included the latest versions, via cdn. And I had to add window event listeners for Turbolinks and Laravel Livewire, and call tippy.

[ulfie22]

@tanthammar I'm using Livewire as well - any hints for making this work with it would be greatly appreciated!! Thanks

[tanthammar]

@ulfie22 I actually skipped this package because I needed to reactivate it when turbolinks has finished loading and livewire redraws the component. Made a blade component instead that I have on my app.blade.php

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
    document.addEventListener('turbolinks:load', () => {
        tippy('[data-tippy-content]');
    });
    window.livewire.hook('afterDomUpdate',  () => {
        tippy('[data-tippy-content]');
    });
</script>

Then in any blade file:

<anytag data-tippy-content="some tooltip"></anytag>
<anytag data-tippy-content="{{ $some_var }}"></anytag>
<anytag data-tippy-content="{{ $some_method() }}"></anytag>

[ulfie22]

@tanthammar Thanks for the very complete explanation!! Livewire is really awesome but I've run into some issues trying to execute my javascript within it - I'll try this approach. Thanks again for the quick complete reply!!

[neodisco]

Thanks for the tip Tanthammar. I came across your post for the tippy issue rather than turbolinks issue, and for anyone else who might be in the same situation in my case I had to wrap your script:

    window.livewire.hook('afterDomUpdate',  () => {
        tippy('[data-tippy-content]');
    });

within:

document.addEventListener("livewire:load", function(event) {}

as mentioned at https://laravel-livewire.com/docs/lifecycle-hooks

[tanthammar]

@neodisco That is strange, on my end it works without that wrapper.

[EricPaulson]

For anyone else who happens upon this, I got it to work like this:

    document.addEventListener("DOMContentLoaded", () => {
        Livewire.hook('element.initialized', (el, component) => {
            tippy('[data-tippy-content]');
        })
    });