<!-- display above the button -->
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip bovenkant">
Bovenkant
</button>
<!-- display on the right the button -->
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip rechterkant">
Rechterkant
</button>
<!-- display underneath the button -->
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="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">
Linkerkant
</button>
Based on the version from MDB:
https://mdbootstrap.com/javascript/tooltips/
To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example which reads the title and placement data attributes on the element to be used for the tooltip and should be placed in the Additional component(s) script section as documented in How to use.
<script>
$('[data-toggle="tooltip"]').tooltip();
</script>