Whenever I hover over my icon, the tooltip is glitching and displays in the wrong place before getting stuck until I refresh the page.
Check out my JSFiddle
This is what I currently have implemented:
HTML:
<div class="dropdown">
<div id="paa" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</span>
</div>
<span class="dropdown-menu dropdown-menu-override">
<li><a class="dropdown-item" href="#">First Item</a></li>
<li><a class="dropdown-item" href="#">Second Item</a></li>
<li><a class="dropdown-item" href="#">Third Item</a></li>
<li><a class="dropdown-item" href="#">Fourth Item</a></li>
<li><a class="dropdown-item" href="#">Fifth Item</a></li>
</span>
</div>
JavaScript:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
CSS:
#paa {
margin: 1em;
}
#paa svg {
width: 1.5em;
fill: #008000;
}
.dropdown-menu-override {
min-width: 0;
}