After tweaking @V1Pr's solution, I developed my own Vanilla JS method:
const tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
const tooltip = new bootstrap.Tooltip(tooltipTriggerEl, {
trigger: "manual",
});
let tooltipTimeout;
let currentToolTip;
tooltipTriggerEl.addEventListener("mouseenter", function () {
let toolTipID;
// Clear Set Timeout
clearTimeout(tooltipTimeout);
// Show Tooltip
tooltip.show();
// Assign current tooltip ID to toolTipID variable
toolTipID = tooltipTriggerEl.getAttribute("aria-describedby");
// Assign current tooltip to currentToolTip variable
currentToolTip = document.querySelector(`#${toolTipID}`);
// Hide tooltip on tooltip mouse leave
currentToolTip.addEventListener("mouseleave", function () {
tooltip.hide();
});
});
tooltipTriggerEl.addEventListener("mouseleave", function () {
// SetTimeout before tooltip disappears
tooltipTimeout = setTimeout(function () {
// Hide tooltip if not hovered.
if (!currentToolTip.matches(":hover")) {
tooltip.hide();
}
}, 100);
});
return tooltip;
});
The HTML :
<span data-bs-toggle="tooltip" data-bs-html="true" title="Check out <a class='text-white opacity-75' href='#'>this link</a>">
<i class="bi bi-info-square"></i>
</span>