<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <button type="button" class="first btn btn-default btn-danger" data-container="body" data-toggle="popover" data-placement="left" title="Popover Left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> <button type="button" class="btn btn-default btn-danger" data-container="body" data-toggle="popover" data-placement="top" title="Popover Top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-default btn-danger" data-container="body" data-toggle="popover" data-placement="bottom" title="Popover Bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-default btn-danger" data-container="body" data-toggle="popover" data-placement="right" title="Popover Right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> </div> </div> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

button{ margin-top: 100px; } .first{ margin-left: 220px; } .popover{ box-shadow: 5px 5px 5px #888888; } .popover-title{ color: #0a0a0a; font-size: 20px; text-align: center; background-color: #fafafa; } .popover-content{ color: #3a3a3a; background-color: #ffffff; text-align: center; } .btn{ width: 200px; height: 100px; }

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