Creating Popovers with Bootstrap

Popover is a small overlay of content that is used to display secondary information of any element when it is clicked or hover by a user.

Also you can set popovers to appear on top, right, bottom and left sides of an element.

HTML Code

<div class="container">
<h1 class="text-center">Creating Popovers with Bootstrap</h1>
<div class="bs-example text-center">
    <div class="popover-demo">
        <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Default popover">Popover To</button>
        <button type="button" class="btn btn-success" data-toggle="popover" data-placement="left" title="Popover title" data-content="Another popover">Popover Left</button>
        <button type="button" class="btn btn-info" data-toggle="popover" data-placement="right" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Popover right</button>
        <button type="button" class="btn btn-warning" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="The last popover!">Popover bottom</button>
    </div>
    <p><strong>Note:</strong> Click on the buttons to display the popover.</p>
    </div>
</div>

<h1 class="text-center">Creating Popovers with Bootstrap</h1>

<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Default popover">Popover To</button>

<button type="button" class="btn btn-success" data-toggle="popover" data-placement="left" title="Popover title" data-content="Another popover">Popover Left</button>

<button type="button" class="btn btn-info" data-toggle="popover" data-placement="right" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Popover right</button>

<button type="button" class="btn btn-warning" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="The last popover!">Popover bottom</button>

</div>

<p><strong>Note:</strong> Click on the buttons to display the popover.</p>

</div>

CSS Code

    .bs-example{
        margin: 150px 50px;
    }
    .popover-demo{
        margin-bottom: 20px;
    }

.bs-example{

margin: 150px 50px;

}

.popover-demo{

margin-bottom: 20px;

}

JS Code

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
     });
});
</script>

$(document).ready(function(){

$('[data-toggle="popover"]').popover({

});

</script>

See the demo and download the full source code using below buttons.

[easy_media_download url=”https://www.tangleskills.com/wp-content/uploads/2017/05/bootstrap-popover.zip”]DEMO