Topic: MDB-Tooltip Problem
Expected behavior
I was expecting the same behavior as the docs https://mdbootstrap.com/docs/vue/advanced/tooltips/
To be more precise this:
Actual behavior
But what I get is this:
Resources (screenshots, code snippets etc.)
I'm using material email on the code:
<mdb-tooltip material email trigger="hover" :options="{placement: 'top'}">
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.
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.
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- 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
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, Magdalenadigitalmanagerguru commented 5 years ago
This problem still remains on last 5.8.2 version :/