Topic: Add tooltip to sideNav
Expected behavior
I am using mdb sidenav that is slim by default, and I am trying to add a tooltip to it. I was expecting it to work, but it does not. The structure of the sidenav should take this into consideration, so the position absolute on the tooltip would work and appear at the side.
Actual behavior
The tooltip doesnt appear ot gets cropped, since the position: absolute doesnt work.
Resources (screenshots, code snippets etc.)
I am trying to acheive something like this:
https://codepen.io/pixelsultan/pen/WrWZpd
https://codepen.io/teecp/pen/gOYRwbO
best regards
You need to use append-to-body property so hidden overflow won't interfere with your tooltips positioning :
<mdb-side-nav-nav>
<mdb-tooltip :options="{ placement: 'right' }" append-to-body>
<mdb-side-nav-cat
slot="reference"
name="Submit blog"
icon="chevron-right"
>
<mdb-tooltip :options="{ placement: 'right' }" append-to-body>
<mdb-side-nav-item
slot="reference"
href="#"
slimIcon="address-book"
>Submit listing</mdb-side-nav-item
>
<span slot="tip">Submit listing</span>
</mdb-tooltip>
<mdb-tooltip :options="{ placement: 'right' }" append-to-body>
<mdb-side-nav-item
slot="reference"
href="#"
slimIcon="address-card"
>Registration form</mdb-side-nav-item
>
<span slot="tip">Registration form</span>
</mdb-tooltip>
</mdb-side-nav-cat>
<span slot="tip">Submit blog</span>
</mdb-tooltip>
</mdb-side-nav-nav>
I see, thanks! I had solved it with css, but I'll try this solution, seems cleaner. Thanks again
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.6.0
- Device: Desktop
- Browser: Chrome
- OS: Win10 Pro
- Provided sample code: No
- Provided link: Yes