Add tooltip to sideNav

Topic: Add tooltip to sideNav

digitalmanagerguru free asked 4 years ago

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

Add comment

Magdalena Dembna staff answered 4 years ago

1 0 Best answer

You need to use <code>append-to-body</code> property so hidden overflow won't interfere with your tooltips positioning :

<pre class="prettyprint"><code><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
 >
 Submit listing
 </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
 >
 Registration form
 </mdb-tooltip>
 </mdb-side-nav-cat>

Submit blog
 </mdb-tooltip>
 </mdb-side-nav-nav>
</code></pre>

Please insert min. 20 characters.

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>

Add comment

digitalmanagerguru free answered 4 years ago

0 0 Best answer

I see, thanks! I had solved it with css, but I'll try this solution, seems cleaner. Thanks again

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

digitalmanagerguru

579Support score
57Questions 29Answers 1Snippets