tooltip didn't hide after click on element (bootstrap v5.0)

Question

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.

Answer 1

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.