<button type="button" class="btn btn-secondary" data-container="body" data-popover="popover" data-placement="top"
            title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on top
    </button>
                                        
                                    

                                        
    <!-- Dismissable -->
    <a tabindex="0" class="btn btn-brand" role="button" data-popover="popover" data-trigger="focus"
       title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">
        Dismissible popover
    </a>

    <!-- Animation -->
    <button type="button" class="btn btn-dark" data-container="body" data-popover="popover" data-animation="true"
            data-placement="top" data-content="And here's some amazing content. It's very engaging. Right?">
        Animation
    </button>

    <!-- Delay -->
    <button type="button" class="btn btn-dark" data-container="body" data-popover="popover"  data-delay='{"show":"500", "hide":"3000"}'
            data-placement="top" data-content="And here's some amazing content. It's very engaging. Right?">
        Delay
    </button>

    <!-- Offset -->
    <button type="button" class="btn btn-dark" data-container="body" data-popover="popover" data-offset="10%"
            data-placement="top" data-content="And here's some amazing content. It's very engaging. Right?">
        Offset
    </button>