title: Activate Popover on Hover and click anywhere to close
body: <p>I'm using Bootstrap 4 and wanted to use the popover where I can hover to active and close it when you click anywhere.</p>
  
  <p>I also want to make the link work inside the popover. Anyone have any idea how to make it work or what am I missing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      $('[data-toggle="popover"]').popover({
          placement : 'top',
          trigger : 'hover',
          html : true
      });
  });
  
  $('body').on('click', function (e) {
      //only buttons
      if ($(e.target).data('toggle') !== 'popover'
          &amp;&amp; $(e.target).parents('.popover.in').length === 0) { 
          $('[data-toggle="popover"]').popover('hide');
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"&gt;
  
  &lt;a href="mailto:test@test.com" data-toggle="popover" title="Popover" data-content="test content &lt;a href='' title='test add link'&gt;link on content&lt;/a&gt;" data-original-title="test title"&gt;Test&lt;/a&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>