Topic: Material Tooltip Styles Not Found
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...
Hi,
please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.
Best,
Hi,
please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.
Best,
Hi Marta,
Here is the snippet, tooltips working correctly but material styles missing.
Happening at least, since version 4.7.1 till 4.7.5
https://mdbootstrap.com/snippets/jquery/blazquez/486622
Regards
Hi,
try this code: https://mdbootstrap.com/snippets/jquery/marta-szymanska/490635?view=project. You have to have all divs in javascript code in one line. We will fix that in our documentation.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.6.1
- Device: asus zenbook ux430u
- Browser: chrome 72
- OS: windows 10 64 bit
- Provided sample code: No
- Provided link: No