0
77
ViewsBootstrap 5 tooltip placement top issue when page has a scroll
I have an issue with tooltips in bootstrap when the placement top is forced. I use the latest version for now: 5.1.3
I have tried to create a code snipped, but the issue is not reproducible on codepen, so I will paste a code here with a video sample.
function initTooltips() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.forEach(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
}
initTooltips();.section {
padding-top: 500px;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>When I scroll the page a bit down to see see the button and hover the mouse over it, the tooltip appears on top with a gap equal to the scroll position.
I tried to play with tooltip options like "boundary" and "container" but it does not help much.
Do you have any ideas on how to fix it?
1 answers
Answer question0
My problem was related to the mistake I made in the main application template.
I forgot to place:
<!DOCTYPE HTML>
on top of the HTML page. This simple mistake caused the issue. The fix is simple but took several days of debugging! Hopefully, this answer will be useful for somebody.