1

I'm trying to generate a popover but it seems the position is always right.

I tried to make the position go left using nubbin class slds-nubbin_right-top, but with this the nubbin arrowhead shows up in correct position, but whole popover dialog is still right of the button.

Here is my sample code. In this, I would like to have two buttons, positioned LEFT and RIGHT. And on Left button.

TestPopover.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

    <lightning:overlayLibrary aura:id="overlayLib"/>  

    <div class="slds-grid slds-card slds-p-around_small ">
        <div class="slds-size_6-of-12">
            <div class="slds-float_left">
                <lightning:button class="mypopover1" name="popover" label="Show Popover (Right)" onclick="{!c.handleShowPopoverRight}"/>
            </div>
        </div>
        <div class="slds-size_6-of-12">
            <div class="slds-float_right">
                <lightning:button class="mypopover2" name="popover" label="Show Popover (Left)" onclick="{!c.handleShowPopoverLeft}"/>
            </div>
        </div>
    </div>
</aura:component>

TestPopoverController.js

({
    handleShowPopoverRight : function(component, event, helper) {
        component.find('overlayLib').showCustomPopover({
            body: 'Test component content for popover',
            referenceSelector: ".mypopover1",
            cssClass: "popoverclass,slds-nubbin_left-top,slds-popover_panel,no-pointer,cTestPopover"
        }).then(function (overlay) {
            setTimeout(function(){
                //close the popover after 1 seconds
                overlay.close();
            }, 3000);
        });
    },

    handleShowPopoverLeft : function(component, event, helper) {
        component.find('overlayLib').showCustomPopover({
            body: 'Test component content for popover',
            referenceSelector: ".mypopover2",
            cssClass: "popoverclass,slds-nubbin_right-top,slds-popover_panel,no-pointer,cTestPopover"
        }).then(function (overlay) {
            setTimeout(function(){
                //close the popover after 1 seconds
                overlay.close();
            }, 3000);
        });
    }
})

TestPopover.css

.THIS.no-pointer .pointer{
    visibility: hidden;
}
.THIS.popoverclass {
    min-height: 50px;
}
.THIS.popoverclass.slds-nubbin_left-top:before, .THIS.popoverclass.slds-nubbin_left-top:after, .THIS.popoverclass.slds-nubbin--left-top:before, .THIS.popoverclass.slds-nubbin--left-top:after,
.THIS.popoverclass.slds-nubbin_right-top:before, .THIS.popoverclass.slds-nubbin_right-top:after, .THIS.popoverclass.slds-nubbin--right-top:before, .THIS.popoverclass.slds-nubbin--right-top:after {
    top: 1.5rem;
    background-color: #fff;
}

Do anyone know if this is a platform issue in the base component or if there is a way around this, to make the popover work correctly for positioned nubbin?

I would like to make the popover show Right of first button, and show Left of second button.

2

So, I dug into the overlayLibrary.js source file with Chrome Debug Console and found this little snippet for you:

function showCustomPopover(options) {
  return lightningOverlayUtils.showCustomOverlay({
    popover: 'popover',
    body: options.body,
    referenceSelector: options.referenceSelector,
    classNames: options.cssClass,
    // Positioning
    // TODO: we need to discuss which positioning params we can expose and what's the schema for them.
    showPointer: true,
    // force to show the pointer
    direction: 'east',
    padding: 2 // align to SLDS

  });
}

It looks like it's not quite ready to take in optional parameters just yet...

  • So it is a bug or half-baked component! A component that only will show popover panels RIGHT of the link. I was going crazy over making this work, as I didn't thought it was an expected behavior, the documentation says, the popover defaults to Right, so obviously, I thought changing to left css classes, will position it accordingly. They only coded it for Right aligned view :-) – VarunC Jul 18 '18 at 4:48
  • Sadly it is a little half-baked. If you have an element on the right hand side of the page, the popover will display over the top of it with the nubbin pointing elsewhere. Not much use if the user has to then figure out which element you are adding the information to. – Bob Buzzard Aug 2 '18 at 14:29

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.