<p dir="auto">Chrome for Mac. Taken from the docs.</p>
<p dir="auto">Open the popovers. Resize. Boom.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/5f33627dbe6e5c824fa49762f54ecfab403442cbd35042878c0021f4c5482e9e/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3733313734332f3936333632322f39313365353636632d303530362d313165332d396262392d6236653464653935626239392e706e67"><img src="https://camo.githubusercontent.com/5f33627dbe6e5c824fa49762f54ecfab403442cbd35042878c0021f4c5482e9e/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3733313734332f3936333632322f39313365353636632d303530362d313165332d396262392d6236653464653935626239392e706e67" alt="screen shot 2013-08-14 at 18 25 04" data-canonical-src="https://f.cloud.github.com/assets/731743/963622/913e566c-0506-11e3-9bb9-b6e4de95bb99.png" style="max-width: 100%;"></a></p>
<p dir="auto">Using Bootstrap in a client project, I had to fix a bug where a Popover was incorrectly positioned.  The detail was that the mix of markup and JavaScript on the page created the popover, set the focus to the triggering field (causing the Popover to appear), but then other JavaScript modified the DOM (adding an alert to the top of the page) that shifted down the triggering field ... and the Popover stayed positioned relative to the fields original position.</p>
<p dir="auto">I also noticed that resizing the browser window also fails to reposition the Popover when, again, the location of the underlying field has changed.</p>
<p dir="auto">My brief research on DOM events indicates that support for generic DOM tree modification events is spotty and buggy, but handling the window resize event would be sufficient for many people.</p>
<p dir="auto">My approach to this is a bit of a hack (and has some Apache Tapestry details mixed in).</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  /** Adds a new operation, &quot;reposition&quot;, to Bootstrap's popover that
   *  re-positions the tooltip/popover if it is currently visible. This is used to handle
   *  changes to the DOM and window resizing.
   */
  jQuery.fn.popover.Constructor.prototype.reposition = function () {
    if (this.enabled &amp;&amp; this.tip().hasClass(&quot;in&quot;)) {
      this.show();
    }
  }"><pre class="notranslate"><code class="notranslate">  /** Adds a new operation, "reposition", to Bootstrap's popover that
   *  re-positions the tooltip/popover if it is currently visible. This is used to handle
   *  changes to the DOM and window resizing.
   */
  jQuery.fn.popover.Constructor.prototype.reposition = function () {
    if (this.enabled &amp;&amp; this.tip().hasClass("in")) {
      this.show();
    }
  }
</code></pre></div>
<p dir="auto">... and in the code that creates the Popover:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  matches.popover(options);

  function doReposition() {
    matches.popover(&quot;reposition&quot;);
  }

  jQuery(window).resize(_.throttle(doReposition, 250));

  // Ideally, there would just be a way to handle this for anything that modifies the DOM.
  T5.sub(T5.events.ADD_ALERT, null, doReposition);"><pre class="notranslate"><code class="notranslate">  matches.popover(options);

  function doReposition() {
    matches.popover("reposition");
  }

  jQuery(window).resize(_.throttle(doReposition, 250));

  // Ideally, there would just be a way to handle this for anything that modifies the DOM.
  T5.sub(T5.events.ADD_ALERT, null, doReposition);
</code></pre></div>
<p dir="auto">This works acceptibly; there's a slighe fade in/fade out animation here that I'd prefer to avoid; it would be nice if the tooltip show() function could be broken up a little, so that the code that determines position could be invoked directly, without all the other stuff that show() does.</p>