VA Pattern Library

Popover 

<!-- SASS: src/stylesheets/_components/popover.scss -->
<!-- JS: src/js/popover.js -->
<!-- Vendor JS: src/js/_vendor/tooltip.js-->

<div class="usa-grid">
    <br>
    <h3>Popover</h3>

    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-html="true" data-placement="auto" data-content="
<p style='margin: 0'>Sed au persciptis.</p>
">Click to toggle Popover (small)
    </button>

    <br>

    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-html="true" data-placement="auto" data-content="
<p style='margin: 0'>Sed au persciptis unde omnis iste natus error sit voluptatem accusantium doremque laudantium, totam rem.</p>
">Click to toggle Popover (large)
    </button>

    <br>

    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-html="true" data-placement="auto" data-content="
<button data-dismiss='popover' class='vaux-popover-close'>Close</button>
<h4 style='margin-top: 0;'>Popover Title</h4>
<p>Sed au persciptis unde omnis iste natus error sit voluptatem accusantium doremque laudantium, totam rem.</p>
<button type='button'>Agree</button>
<button class='usa-button-outline' type='button'>Disagree</button>
">Click to toggle Popover (with close button)
    </button>

</div>