1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
Topic: MDB-Tooltip Problem

digitalmanagerguru free asked 4 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 commented 4 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 free commented 4 years ago

This problem still remains on last 5.8.2 version :/

digitalmanagerguru free answered 4 years 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 free commented 4 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 free commented 4 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 commented 4 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 free commented 4 years ago

Allright, thanks.

digitalmanagerguru free commented 4 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 commented 4 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

Magdalena Dembna staff answered 4 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.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Opened

Specification of the issue
  • ForumUser: 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
Tags
mdb-tooltip
About author
digitalmanagerguru
579Support score
57Questions 29Answers 1Snippets