2

I changed the bootstrap version from 4.5.x to 5.0.1 and also changed the initializing of the tooltips from $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'}); to

let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl, {
        container: 'body'
    });
})

But the problem that the tooltip is still visible after clicking the elememt with the shown tooltip comes back with version 5.0. I have solved this in version 4.5.x with $('[data-toggle="tooltip"]').tooltip("hide"); but that doesn't work in version 5.

I tried:

let tooltipElement = document.getElementById('myElementwithTooltip');
let tooltip = bootstrap.Tooltip.getInstance(tooltipElement);
tooltip.hide();
// or
tooltip.dispose();

But that didn't help properly. I have many tooltips on the website some of them open a dialog some of them are as discription of a column header in a datatable plugin (with sort function).

The tooltips on the bootstrap website have the same problem. After clicking the element the tooltip doesn't disapear.

I would be very grateful for any ideas or suggestions.

Heiko
  • 45
  • 1
  • 7

1 Answers1

2

If you want the tooltip on hover then make sure you specify hover as the trigger option.

let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl, {
        container: 'body',
        trigger : 'hover'
    });
})

Then you won't have the click problem.

Codeply

Also, hide() isn't going to work the way you've shown unless it's tied to an event handler.

Apexxs
  • 149
  • 4
  • This doesn't answer the main problem which is hiding the tooltip after a click. I've been struggling with this problem for a couple of hours, tried a lot of answers and my main conclusion is that using the new bootstrap 5 Tooltip() constructor simply doesn't work in such cases. Using jQuery instead will work - `$(tooltipElement).tooltip()` and `$(tooltipElement).tooltip('dispose')` did the trick for me. – Rony Aug 03 '22 at 09:06