Add tooltip to sideNav

Topic: Add tooltip to sideNav

digitalmanagerguru asked 6 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 premium answered 6 years ago

1 0 Best answer

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 answered 6 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