CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Ivan Dubynets
Ivan Dubynets

Reputation: 431

Bootstrap 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

Video sample of the problem

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?

Upvotes: 3

Views: 3071

Answers (2)

Paolo Moscatelli
Paolo Moscatelli

Reputation: 1

Ivan answer worked for me! thanks! I was getting inconsistent results within joomla, with tooltips inside a table showing only when I scrolled, or never. my problem was that I seemed to had broken the doctype declaration in my joomla template, since I had inserted a link to a stylesheet before such declaration. moved that ahead in the template, and all problem gone.

Upvotes: 0

Ivan Dubynets
Ivan Dubynets

Reputation: 431

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.

Upvotes: 14

Related Questions