MDB-Tooltip Problem


Topic: MDB-Tooltip Problem

digitalmanagerguru asked 5 years ago

Expected behavior

I was expecting the same behavior as the docs https://mdbootstrap.com/docs/vue/advanced/tooltips/

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 5 years 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 commented 5 years ago

This problem still remains on last 5.8.2 version :/


Magdalena Dembna staff premium answered 5 years 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>
</mdb-tooltip>

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


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.

Problem

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 commented 5 years ago

I want to add that the changes from this commit: https://git.mdbootstrap.com/mdb/vue/vu-pro/commit/1771d378e3e7325b6f752ba613a6a209547f3b1c

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 commented 5 years ago

Update2: I've found out that the scoped was removed to fix the "arrow" on the tooltip: https://git.mdbootstrap.com/mdb/vue/vu-pro/commit/fc38ecb06806cc49550201c05aad0470f7556b4c

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


Magdalena Dembna staff premium commented 5 years 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 commented 5 years ago

Allright, thanks.


digitalmanagerguru commented 5 years 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 5 years ago

In MDB Vue 6.3.0 we can no longer reproduce this issue - neither in the built app (https://vue.mdbootstrap.com/#/advanced/pro/tooltip) nor in development mode. Send a code snippet and describe your environment (browser, its version, etc). Kind regards, Magdalena


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

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