MDB-Tooltip Problem

web
mobile

Topic: MDB-Tooltip Problem

digitalmanagerguru pro asked 7 months 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 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>
</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.


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.

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 pro commented 7 months 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 pro commented 7 months 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 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 (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.
Status

Open

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