Add tooltip to sideNav


Topic: Add tooltip to sideNav

digitalmanagerguru asked 5 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


Magdalena Dembna staff premium answered 5 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: 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