javascript - Bootstrap 5 tooltip placement top issue when page has a scroll - Stack Overflow

admin管理员组

文章数量:1278826

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

<script src="/[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>

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

<script src="https://cdn.jsdelivr/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.

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?

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Apr 25, 2022 at 9:35 cloned 6,75244 gold badges3030 silver badges4444 bronze badges asked Apr 25, 2022 at 8:34 Ivan DubynetsIvan Dubynets 43111 gold badge55 silver badges1414 bronze badges 6

• I created a snippet from your code, I can't reproduce your issue. Maybe you have more code that you are not showing us? – cloned Commented Apr 25, 2022 at 9:36
• @cloned, thank you for your reply and the time you spent for creating a code snippet. The problem is not reproducible in an iframe, probably the issue inside popper.js. As was mentioned in a question description, I have tried to create a snippet and could not reproduce the issue that way. So I created a minimal HTML code, that can be easily copied and pasted to a local HTML file for testing. I think it is much better to revert the question description to the original state, otherwise, nobody will understand the problem. what do you think? – Ivan Dubynets Commented Apr 25, 2022 at 15:39
• If it can be reproduced locally it can be reproduced in an iframe. Maybe you need some additional css? Or tell users to view this in full screen? – cloned Commented Apr 25, 2022 at 19:32
• it can be reproduced, but the question does not make sense after your formating. Please, do not reformat the questions without confirmation from the owner in the future – Ivan Dubynets Commented May 3, 2022 at 9:51
• All I did was put your code in a snippet. Feel free to modify the snippet so we can see your problem, I don't see where I missed something from your code? Sorry if I did miss something from your code. Please update the snippet with your code so we can reproduce your issue there :) – cloned Commented May 3, 2022 at 9:53

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 14

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.

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.

本文标签： javascriptBootstrap 5 tooltip placement top issue when page has a scrollStack Overflow