Bootstrap - Tooltip that is not closing immediately when the mouse is hovering over it
Table of Contents
About
tooltip in Bootstrap are modal that:
- opens when the mouse hovers over an element
- and closes when it leave it.
By default, the tooltip will close as soon as the mouse is leaving the element, this snippet will close the tooltip if:
- the mouse is not over the element and the tooltip.
This snippet has been developed in native javascript and Jquery.
Snippet
Native Javascript
The same example but in pure javascript
- The tooltip where the data-bs-trigger is set to manual meaning that the code will manage when the tooltip is visible.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-trigger="manual" data-bs-html="true" title="<h3>Tooltip</h3> <p>This tooltip will not close if you hover over the button or this tooltip</p>">
Button with a tooltip persistent on tooltip hover
</button>
- The javascript that uses the following technologies:
- setIntervall to create a job that will run at interval (cleaninterval to delete the job)
- document.querySelectorAll to select the tooltip target element
window.addEventListener('load', function () {
// A variable to see if the mouse is over the target element
let hoverTargetElement = false;
// The jobId that is returned from the setIntervall
let jobId = null;
document.querySelectorAll(`[data-bs-toggle="tooltip"]`)
.forEach(el => {
let tooltip = new bootstrap.Tooltip(el);
el.addEventListener("mouseenter",function(){
tooltip.show();
hoverTargetElement = true;
});
el.addEventListener("mouseleave",function(){
hoverTargetElement = false;
if (jobId === null) {
jobId = setInterval(function () {
if (document.querySelectorAll(".tooltip:hover").length === 0 && hoverTargetElement === false) {
tooltip.hide();
clearInterval(jobId);
jobId = null;
}
}, 100);
}
});
});
});
Jquery
- The tooltip where the data-bs-trigger is set to manual meaning that the code will manage when the tooltip is visible.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-trigger="manual" data-bs-html="true" title="<h3>Tooltip</h3> <p>This tooltip will not close if you hover over the button or this tooltip</p>">
Button with a tooltip persistent on tooltip hover
</button>
- The javascript that uses the following technologies:
- setIntervall to create a job that will run at interval (cleaninterval to delete the job)
- mouseenter and mouseleave event to trigger the tooltip state (ie show or close)
window.addEventListener('load', function () {
// A variable to see if the mouse is over the target element
let hoverTargetElement = false;
// The jobId that is returned from the setIntervall
let jobId = null;
$(`[data-bs-toggle="tooltip"]`)
.tooltip()
.on("mouseenter", function () {
$(this).tooltip("show");
hoverTargetElement = true;
})
.on("mouseleave", function () {
// the mouse is no more hover the target element (ie the button)
hoverTargetElement = false;
// if the jobId is not null, there is a job running
if (jobId == null) {
// keep a pointer to the target element used in the job function
let _this = this;
// Create the job function that will run ever 100 ms.
jobId = setInterval(function () {
if ($(".tooltip:hover").length === 0 && hoverTargetElement === false) {
$(_this).tooltip("hide")
clearInterval(jobId);
jobId = null;
}
}, 100);
}
});
});