Material Tooltip Styles Not Found


Topic: Material Tooltip Styles Not Found

Igor Ekishev asked 3 years ago

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...


Marta Szymanska staff pro premium answered 3 years ago

Hi,

please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,


Blazquez pro answered 3 years ago

Any update on this? Same problem here.

Regards


Marta Szymanska staff pro premium answered 3 years ago

Hi,

please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,


Blazquez pro answered 3 years ago

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


Marta Szymanska staff pro premium answered 3 years ago

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


Blazquez pro answered 3 years ago

Thanks Marta,

It worked


Marta Szymanska staff pro premium answered 3 years ago

Hi,

you're welcome.

Best, Marta


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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