MDB-Tooltip Problem


Topic: MDB-Tooltip Problem

digitalmanagerguru pro asked 7 months ago

Expected behavior

I was expecting the same behavior as the docs

To be more precise this:Expected

Actual behavior

But what I get is this:Actual

Resources (screenshots, code snippets etc.)

I'm using material email on the code:

 <mdb-tooltip material email trigger="hover" :options="{placement: 'top'}">

Magdalena Dembna staff premium commented 7 months ago

Hi, we have found this bug already and it should be fixed in the newest version - MDB Vue 5.8.2. Let me know if the problem still applies after the update. Kind regards, Magdalena

digitalmanagerguru pro commented 7 months ago

This problem still remains on last 5.8.2 version :/

Magdalena Dembna staff premium answered 7 months ago

I have checked the following code in MDB Vue Pro 5.8.2 and it seems to work fine:

<mdb-tooltip material email trigger="hover" :options="{placement: 'top'}">
      <span slot="tip">Email tooltip</span>
      <mdb-btn slot="reference" rounded outline="blue">Hover over me</mdb-btn>

How do you install our package? If you're using yarn, try removing yarn.lock, node_modules, clearing cache and installing dependencies once again.

digitalmanagerguru pro answered 7 months ago

I installed using npm. I've today delete node_modules and package-lock.json only for the sake of it, but the problem still remains.


If I go to mdbvue/src/components/Advanced/Tooltip, then in the first class: .tooltip, if I remove "background-color: rgba(0, 0, 0, 0.85);" and "padding: 0.24em 0.5em;" it fixes this issue. (I am pro, dunno how the free/pro is working together on this) But the problem still exists. Hope my findings can help you guys too.

After edit

digitalmanagerguru pro commented 7 months ago

I want to add that the changes from this commit:

Only the stepper is changed, but the scoped are missing on my tooltips, and I've indeed delete node modules and installed again via npm. Akward... Why is that any idea?

digitalmanagerguru pro commented 7 months ago

Update2: I've found out that the scoped was removed to fix the "arrow" on the tooltip:

So you guys need to make another approach to fix both problems.

Magdalena Dembna staff premium commented 7 months ago

We will take another look - we didn't spot this issue because it doesn't appear in the dev mode - only after the app is built. Kind regards, Magdalena

digitalmanagerguru pro commented 7 months ago

Allright, thanks.

digitalmanagerguru pro commented 2 months ago

Hi there, Magda, this problem still exist on last version. The "email" doesnt work as supposed. The ".tooltip .tooltip-inner" is overwritting the .md-inner-email and therefore the style is not the correct one.

best regards

Magdalena Dembna staff premium commented 2 months ago

In MDB Vue 6.3.0 we can no longer reproduce this issue - neither in the built app ( nor in development mode. Send a code snippet and describe your environment (browser, its version, etc). Kind regards, Magdalena

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Vue
  • MDB Version: 5.8.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: Yes