Bootstrap tooltip not working after refresh

#1

Hi,

I try to use Bootstrap tooltip with this javascript code :

Livewire.onLoad(() => {
    $('[data-toggle="tooltip"]').tooltip()
})

It works the first time. But it’s not working when the component refresh after a wire:click for instance. No errors in console. Someone can tell me how to solve this ?

Thanks again

Regards

#2

You can refresh the component by

$this->property  = $this->property->refresh()

If You have for example a forEach and each element has a tooltip.

#3

Hi, nothing in pure javascript for this ? I’m on an entire component here with rows displayed like this :

<button class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="top" title="the tooltip title" wire:click="download()"><i class="fa fa-download"></i></button>
#4

Just use:

$(document).ready(function () {
   $('[data-toggle="tooltip"]').tooltip()
}
#5

How would you go about this if you’re using a package with custom web elements.

I am using require('@github/time-elements') but don’t call any functions like above in your example with .tooltip()

#6

Hi!

This was the first search result on Google when I was looking up the same issue. Using

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip()
}

OR

Livewire.onLoad(() => {
    $('[data-toggle="tooltip"]').tooltip()
})

resulted in the same behavior mentioned by @making-digital.

My solution was:

<script>
    document.addEventListener("DOMContentLoaded", () => {
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

        Livewire.hook('message.processed', (message, component) => {
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            })
        })
    });
</script>

I found this info from the Livewire Lifecycle Hooks document and the ‘message.processed’ hook felt like it may work.

Hopefully this is helpful to someone stumbling into something similar!

2 Likes
#7

This working for me. Thank You Very Much