Sometimes, we want to fix Bootstrap’s tooltip doesn’t disappear after button click and mouseleave with JavaScript.

In this article, we’ll look at how to fix Bootstrap’s tooltip doesn’t disappear after button click and mouseleave with JavaScript.

How to fix Bootstrap’s tooltip doesn’t disappear after button click and mouseleave with JavaScript?

To fix Bootstrap’s tooltip doesn’t disappear after button click and mouseleave with JavaScript, we can select all the tooltip toggle elements and then create the tooltip with them.

For instance, we write

const tooltipTriggerList = [
  ...document.querySelectorAll('[data-bs-toggle="tooltip"]'),
];
const tooltipList = tooltipTriggerList.map((tooltipTriggerEl) => {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
    trigger: "hover",
  });
});

to select all tooltip toggle elements with querySelectorAll.

And then we call map on them after spreading them to an array with a callback.

In the callback, we return the Tooltip that we create from each element, which is the tooltipTriggerEl.

And we set the trigger action for each tooltip to 'hover' to show the tooltip when we hover over the tooltip toggle element.

Conclusion

To fix Bootstrap’s tooltip doesn’t disappear after button click and mouseleave with JavaScript, we can select all the tooltip toggle elements and then create the tooltip with them.