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!

1 Answer 1


You can check Playground

enter image description here

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>

Then, adjust the position of child element through css:

    position: absolute;
  • Thanks!!!!!!!!! :)
    – malu
    Commented Aug 21, 2019 at 18:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .