Bootstrap Popover Options Example

Keywords : popover, bootstrap, bootstrap popover, bootstrap popover examples, bootstrap popover css, bootstrap popover html, popover bootstrap, bootstrap popover options, bootstrap popover options example

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Popover Options Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .bcontent {
            margin-top: 10px;
        }
    </style>
    <script>
        $(function() {
            $('#toppover').popover({
                title: 'Top Popover',
                content: 'Top popover content',
                placement: 'top'
            });
            $('#lftpover').popover({
                title: 'Left Popover',
                content: 'Left popover content',
                placement: 'left'
            });
            $('#rgtpover').popover({
                title: 'Right Popover',
                content: '<b>Right</b> popover content',
                html: true,
                placement: 'right'
            });
            $('#btmpover').popover({
                title: 'Bottom Popover',
                content: 'Bottom popover content',
                placement: 'bottom',
                delay: {
                    show: 0,
                    hide: 300
                }
            });
        });
    </script>
</head>
<body>
    <div class="container bcontent">
        <h2>Bootstrap Popover Options</h2>
        <hr />
        <br />
        <br />
        <br />
        <button class="btn btn-primary" data-toggle="popover" id="toppover">Top Popover</button>
        <button class="btn btn-primary" data-toggle="popover" id="lftpover">Left Popover</button>
        <button class="btn btn-primary" data-toggle="popover" id="rgtpover">Right Popover</button>
        <button class="btn btn-primary" data-toggle="popover" id="btmpover">Bottom Popover</button>
    </div>
</body>
</html>

Bootstrap Popover Options Example

Example

Result