Popovers

The popover is a similar tool as tooltip. The main difference between tooltip and popover is that popover pop up box can contain more content than tooltip.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $(".popover-top").popover({
        placement : 'top'
    });
    $(".popover-right").popover({
        placement : 'right'
    });
    $(".popover-bottom").popover({
        placement : 'bottom'
    });
    $(".popover-left").popover({
        placement : 'left'
    });
});
</script>
<div class="popover-demo">
    <button type="button" class="btn btn-primary popover-top" data-toggle="popover" title="Popover title" data-content="Default popover">Popover on top</button>
    <button type="button" class="btn btn-success popover-right" data-toggle="popover" title="Popover title" data-content="Popover on right.">Popover on right</button>
    <button type="button" class="btn btn-info popover-bottom" data-toggle="popover" title="Popover title" data-content="Popover on bottom.">Popover on bottom</button>
    <button type="button" class="btn btn-warning popover-left" data-toggle="popover" title="Popover title" data-content="Popover on left.">Popover on left</button>
</div>

Output