4

I'm having big problems trying to display tooltips inside of a modal container.

Picture below demonstrates what's going on.

On top, I've stuck my tooltip component inside of the modal container:

<div class="slds-modal__container"/>

Which means that it's getting displayed just fine. However, just below, in the content container:

<div class="slds-modal__content"/>

The tooltip component is getting cut off and stacked below the modal header.

I've tried playing with z-index, visibility, overflows, positioning. Everything and anything that should be the fix if we weren't working with Lightning.

The only fix here seems to be to move the tooltip outside of the content div and up in to the container itself. This wouldn't be an issue, except that Lightning Locker is a thing, and I'm not able to tinker with the DOM in any reasonable way; as is, my tooltip is stuck inside of the modal content div.

Has anyone else run in to this problem? Is there any way at all to get around this, is there an obvious solution staring me in the face?

Tooltip Failing

  • 1
    Take a look at the tooltip component at lightningstrike.io - easy to implement and use and should work fin in this situation. Once you confirm it works you can either adapt yours or continue to use theirs – Eric May 18 '17 at 13:55
1

Update: more playing, no black magic involved, only lightning component rendering life-cycles.

Turns out that"slds-modal__content" applies the attributes "overflow:hidden" and "overflow-y:hidden", and "slds_modal" has "z-index: 9001".

Play with the modal content overflow attributes, increase the z-index of your tooltip and you're good to go.

0

If you look at z-index property of div that contains your tooltip message at the bottom of your page, to be honest it is a sf web component "lightning-primitive-bubble" with class .slds-tooltip, you will find that z-index equals to 6000 for that class. Whereas .slds-backdrop(that we use for backdrop) has z-index = 9000 and .slds-modal(usually goes with section tag) z-index equals to 9001.

My workaround is following - I decreased z-index values for slds-backdrop and slds-modal by adding additional classes with corresponding z-index values.

<section class="slds-modal overriden-modal">
  Modal content
</section>
<div class="slds-backdrop overriden-backdrop"></div>

And styles for them looks like

.THIS .slds-modal.overriden-modal {
    z-index: 5000;
}

.THIS .slds-backdrop.overriden-backdrop {
    z-index: 4500;
}

I think you will find desired z-index values for your case. Just play with z-index values for .slds-modal, .slds-backdrop and if you want for .slds-popover by overriding z-index for the last one globally.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.