Bootstrap Tooltip 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)
  • event listener on mouseenter and mouseleave event to trigger the tooltip state (ie show or close)
  • 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)
  • Jquery

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);
			}
		});
});