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
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
CSS Code
1 2 3 4 5 6 |
.bs-example{ margin: 150px 50px; } .popover-demo{ margin-bottom: 20px; } |
JS Code
1 2 3 4 5 6 |
<script type="text/javascript"> $(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