Hey there, I've been facing an issue with tooltips in Bootstrap specifically when the placement is forced to "top." Currently, I am using version 5.1.3.
I attempted to create a code snippet to showcase the problem, but unfortunately, it's not replicable on CodePen. So instead, I'll share a code here along with a sample video.
function initializeTooltips() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.forEach(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
}
initializeTooltips();.section {
padding-top: 500px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3f243b2439">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d28332c332e">[email protected]</a>/dist/js/bootstrap.bundle.js"></script>
<div class="section">
<div class="row">
<div class="col-12 text-center mt-5 pt-5">
<button type="button" class="btn btn-secondary" id="test-btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip with button">
Tooltip on top
</button>
</div>
</div>
</div>Every time I scroll the page slightly downwards to view the button and hover my mouse over it, the tooltip pops up at the top with a gap equivalent to the scroll position.
https://i.sstatic.net/Gcqa5.gif
I experimented with various tooltip options like "boundary" and "container," but they didn't seem to alleviate the issue much.
Do you have any suggestions on how I can resolve this? Let me know your thoughts!