Unable to position LEFT when showing popover using lightning:overlayLibrary

Question

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.

Answer 1

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...