title: Bootstrap 5 Tooltip position on Navbar buttons doesn't move with navbar when expanded
body: <p>Using Bootstrap 5, I have a navbar on my page that expands downwards when clicked. I have a few buttons that are positioned along with the navbar with tooltips. Before the navbar is expanded, the tooltips work as expected, however, once the navbar has been expanded, the buttons will move down the page but the tooltips don't follow the new button position.</p>
  <p>The image below shows the navbar before it's been expanded:</p>
  <p><a href="https://i.stack.imgur.com/hNzLW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hNzLW.png" alt="enter image description here" /></a></p>
  <p>The next image shows when the navbar has been expanded:</p>
  <p><a href="https://i.stack.imgur.com/tcPe9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tcPe9.png" alt="enter image description here" /></a></p>
  <p>I believe the tooltip is still showing but the tooltip position remains at the top of the webpage out of view, I'm unsure how to program the tooltip so it knows that the buttons on the navbar had moved position after the navbar was expanded.</p>
  <p>HTML where the buttons are located:</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-light navbar-fixed-top pb-3&quot; style=&quot;background-color: white&quot;&gt;
  &lt;div class=&quot;d-flex mt-2 ps-3&quot;&gt;
      &lt;button class=&quot;navbar-toggler&quot; id=&quot;navbar&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarToggleExternalContent&quot; aria-controls=&quot;navbarToggleExternalContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot; onclick=&quot;topFunction()&quot;&gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class=&quot;d-inline-flex&quot; style=&quot;align-items: center; margin-left: 1em&quot;&gt;
          &lt;a class=&quot;btn btn-outline-secondary&quot; type=&quot;button&quot; asp-page=&quot;Index&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;right&quot; title=&quot;Back to List&quot; data-bs-animation=&quot;false&quot;&gt;
              &lt;i class=&quot;far fa-arrow-alt-left fa-lg&quot;&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;button class=&quot;btn btn-outline-secondary ms-2&quot; type=&quot;button&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;right&quot; title=&quot;Export Image&quot; id=&quot;exportButton&quot; data-bs-animation=&quot;false&quot; onclick=&quot;exportImage()&quot;&gt;
              &lt;i class=&quot;fas fa-file-image fa-lg&quot;&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;button class=&quot;btn btn-outline-secondary ms-2&quot; type=&quot;button&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;right&quot; title=&quot;Save as PDF&quot; id=&quot;saveAsPdfButton&quot; data-bs-animation=&quot;false&quot; onclick=&quot;saveAsPdf()&quot;&gt;
              &lt;i class=&quot;far fa-file-pdf fa-lg&quot;&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;button class=&quot;btn btn-outline-secondary ms-2&quot; type=&quot;button&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;right&quot; title=&quot;Refresh&quot; id=&quot;refreshButton&quot; data-bs-animation=&quot;false&quot; onclick=&quot;getChartDataFromServer('chartCanvas')&quot;&gt;
              &lt;i class=&quot;fas fa-sync-alt fa-lg&quot;&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;div class=&quot;d-flex align-items-center justify-content-center&quot; id=&quot;stopwatchFlexContainer&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;right&quot; title=&quot;Chart Loading Time&quot;&gt;
              &lt;div class=&quot;ms-2&quot;&gt;&lt;i class=&quot;far fa-stopwatch fa-lg&quot; style=&quot;color: #0069D9&quot;&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class=&quot;ms-1&quot; style=&quot;font-size: 1.25em&quot; id=&quot;s_minutes&quot;&gt;00&lt;/div&gt;
              &lt;div class=&quot;&quot; style=&quot;font-size: 1.25em&quot;&gt;:&lt;/div&gt;
              &lt;div class=&quot;&quot; style=&quot;font-size: 1.25em&quot; id=&quot;s_seconds&quot;&gt;00&lt;/div&gt;
              &lt;div class=&quot;&quot; style=&quot;font-size: 1.25em&quot;&gt;:&lt;/div&gt;
              &lt;div class=&quot;&quot; style=&quot;font-size: 1.25em&quot; id=&quot;s_ms&quot;&gt;000&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;text-danger&quot;&gt;@Html.ValidationMessage(&quot;DbErrorEditMap&quot;)&lt;/div&gt;
  </code></pre>
  
  <p>Javascript when pages loads:</p>
  <pre><code>// Enable the bootstrap tooltip feature.
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle=&quot;tooltip&quot;]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
  });
  </code></pre>