Popoversv4.x

<!-- Buttons -->
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Popover on left. Click again to dismiss.">Popover on left</button>

<button type="button" class="btn btn-secondary clearfix-right" data-container="body" data-toggle="popover" data-placement="top" data-content="Popover on top. Click again to dismiss.">Popover on top</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Popover on bottom. Click again to dismiss.">Popover on bottom</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Popover on right. Click again to dismiss.">Popover on right</button>

<!-- Links -->
<p>This is a <a class="bright-blue" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="hover" href="#"> link with popover right </a> and <code>data-trigger="hover"</code> embedded in a paragraph.</p>

<!-- Info Icon -->
<p><span class="bright-blue pointer" data-html="true" data-container="body" data-trigger="click" data-toggle="popover" data-placement="right"
data-content="This is an info icon with a <code>data-trigger='click'</code> and the CSS attribute set to <code>cursor: pointer</code>. The icon is part of the <a href='https://icons.getbootstrap.com/' target='_blank'>Bootstrap Icons project. Click again to dismiss.</a>">
<i class="bi bi-info-circle-fill bright-blue"></i></span></p>

<!-- Paragraph -->
<h5 class="mt-3">Paragraph</h5>
<p data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">This entire paragraph has a top popover with a <code>data-trigger="hover"</code>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti commodi recusandae, dicta dignissimos fuga nisi molestiae aut corporis similique numquam voluptatem eaque deleniti odit
  inventore ex, nam accusamus unde? Omnis?</p>
  

// Set options for popovers per page with javascript objects
$('[data-toggle="popover"]').popover({
  'container': 'body',
  "animation": true,
  "html": true,
  "placement": 'right',
  "trigger": 'hover',
  "offset": '10'
});

// Use this to allow popover to dismiss on clicking any element
$('.popover-dismiss').popover({
  trigger: 'focus'
});