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?
Best Answer
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.