<!-- display above the button -->
<button type="button" class="btn btn-primary" data-tippy data-tippy-placement="top" title="Tooltip bovenkant" aria-label="Bovenkant, Tooltip bovenkant">
Bovenkant
</button>
<!-- display on the right the button -->
<button type="button" class="btn btn-primary" data-tippy data-tippy-placement="right" title="Tooltip rechterkant" aria-label="Rechterkant, Tooltip rechterkant">
Rechterkant
</button>
<!-- display underneath the button -->
<button type="button" class="btn btn-primary" data-tippy data-tippy-placement="bottom" title="Tooltip onderkant" aria-label="Onderkant, Tooltip onderkant">
Onderkant
</button>
<!-- display on the left the button -->
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip linkerkant" aria-label="Linkerkant, Tooltip linkerkant">
Linkerkant
</button>
The tooltips are created with tippy.js. To instantiate a tooltip provide the attribute data-tippy and put the tooltip content in the attribute title.
The placement of the tooltip can be set with the data-tippy-placement attribute. For all possible values of the placement see here.
For backwards compatibility it is still possible to instantiate a tooltip with data-toggle="tooltip" and set the placement with the data-placement attribute.