Material Design Tooltip is shown like a default bootstrap tooltip...

styles defined at top of page

<link href="../../lib/css/bootstrap.min.css" rel="stylesheet">
<link href="../../lib/css/mdb.min.css" rel="stylesheet">

scripts defined at bottom of page

<script type="text/javascript" src="../../lib/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../lib/js/popper.min.js"></script>
<script type="text/javascript" src="../../lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../lib/js/mdb.min.js"></script>

tooltip is creating dynamically and appended to desired div

<a href="#" class="material-tooltip-main" data-toggle="tooltip" data-placement="right" title="The last tip!">
  <i style="transform: scale(0.8)" class="text-black-50 fa fa-question-circle"></i>
</a>

and after page generated I initiate tooltip with

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

And it shows like a normal default bootstrap tooltip. Btw the class "material-tooltip-main" (got it from example) does not exist anywhere...