3

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!

4

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>
        </div>
    </section>
</div>

Then, adjust the position of child element through css:

.slds-popover.slds-nubbin_left{
    position: absolute;
    left:0rem;
    top:-1.3rem;
}
  • Thanks!!!!!!!!! :) – malu Aug 21 at 18:19

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.