Boostrap 4 Tooltips and Popovers

Tooltips and Popovers in Boostrap:

Tooltips are small pop-up messages that appear when you hover over an element (such as a button or link) on a web page.

The Popover plugin is the same as the tooltips one; it’s a widget that shows when the user locates and clicks on a certain element.

Tooltip Component:

Tooltips are small overlays that appear when users hover over or click on an element, providing additional information or a brief description.

                                      
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

To enable tooltips, make sure you have included the Bootstrap JavaScript file and initialize them using JavaScript:

                                      
<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>

Popover Component:

Popovers are similar to tooltips but provide more detailed information or content in a small overlay that appears when users click on an element.

                                      
                                        <button type="button" class="btn btn-secondary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Popover with content</button>

To enable popovers, make sure you have included the Bootstrap JavaScript file and initialize them using JavaScript:

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