title: Cannot access Bootstrap 5 bs.popover data with jQuery
body: <p>I was using bootstrap 3 and 4 and wanted to close all popovers when user clicked anywhere else on the page.  I used <a href="https://stackoverflow.com/a/21007629/166231">https://stackoverflow.com/a/21007629/166231</a> (and 3rd comment) as a guide to implement a solution.</p>
  <pre class="lang-js prettyprint-override"><code>    const hideVisiblePopover = function(): void {
          const visiblePopover = KatApp[ &quot;visiblePopover&quot; ];
          // Just in case the tooltip hasn't been configured
          if ( visiblePopover === undefined || $(visiblePopover).data(&quot;bs.popover&quot;) === undefined ) return;
      
          // Call this first b/c popover 'hide' event sets visiblePopover = undefined
          if ( that.bootstrapVersion == 3 ) {
              $(visiblePopover).data(&quot;bs.popover&quot;).inState.click = false
          }
          $(visiblePopover).popover(&quot;hide&quot;);
      };
  </code></pre>
  <p>And my event handlers I set up on the <code>div</code> container of all my markup are:</p>
  <pre class="lang-js prettyprint-override"><code>    application.element
          .on(&quot;show.bs.popover.RBLe&quot;, function() { hideVisiblePopover(); })
          .on(&quot;shown.bs.popover.RBLe&quot;, function( e ) { 
              KatApp[ &quot;visiblePopover&quot;] = e.target; 
          })
          .on(&quot;hide.bs.popover.RBLe&quot;, function() { 
              KatApp[ &quot;visiblePopover&quot;] = undefined; 
          });
  </code></pre>
  <p>However, with bootstrap 5, my attempt to get the <code>bs.popover</code> with this line:</p>
  <pre class="lang-js prettyprint-override"><code>$(visiblePopover).data(&quot;bs.popover&quot;)
  </code></pre>
  <p>Returns undefined.  Is there a different place to look for this now?</p>