Popover in Lightning Web Component (LWC)

Question

I am trying to implement a popover in Salesforce LWC. I am able to get it work but only issue is the popover is not actually coming above the body like a modal. You can see the sample here. As you see when a radio button is clicked I want to show a help popover but without taking height of the entire row/div. Is this something possible? Appreciate any inputs !! Thanks!

Answer 1

You can check Playground

You need to use position relative for parent and position absolute for child so that the child is placed in view-port according to position of parent. You should also use any 2 properties from left,top,right,bottom on child to position it correctly. Below is what you can do:

Make the parent relative using slds-is-relative:

<div class="slds-is-relative slds-col slds-size_5-of-12 slds-float_right ">
    <section if:true={opt.checked} class="slds-popover slds-nubbin_left" role="dialog">
        <div class="slds-popover__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </section>
</div>

Then, adjust the position of child element through css:

.slds-popover.slds-nubbin_left{
    position: absolute;
    left:0rem;
    top:-1.3rem;
}