Tooltips and popovers require the Popper.js library. And they both need to be initialized inside your JS file.
The easiest way to add a tooltip to an element is to add the data-toggle="tooltip" attribute and the data-placement="..." to place it top/bottom/left/right. The content that will be visible inside the tooltip needs to placed inside the title attribute.
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
In order for this code to work, you must specify inside your js that all elements with the data-toggle="tooltip" attribute should initialise a tooltip using the following code:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
If you want to add a popover to an element you need to add the data-toggle="popover" attribute and the data-placement="..." to place it top/bottom/left/right. The content that will be visible inside the popover needs to placed inside the data-content="..." attribute.
<button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="right" data-content="Wherever you go, there you are.">
Popover on right
</button>
In order for this code to work, you must specify inside your js that all elements with the data-toggle="popover" attribute should initialise a popover using the following code:
$(function () {
$('[data-toggle="popover"]').popover()
});
If you want to see more configuration options, make sure you check out the official Bootstrap 4 documentation on tooltips and popovers.