[SalesForce] lightning:overlayLibrary popover styling – missing nubbin and how to position the popover on top of the element instead of right

The nubbin in my popover is showing a white diamond instead of a blue arrow inspite of specifying 'slds-nubbin_left' class in cssClass attribute. Please see below. If we can't get the nubbin to work, I will settle for no nubbin at all. In that case, how can I completely hide that white diamond?

And also, how can I make sure the popover sits on TOP of the element as opposed to its right like in the screrenshot below? Any CSS I put in my custom css class is being ignored.

COMPONENT

<aura:component implements="flexipage:availableForAllPageTypes">    
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button class="mypopover" name="popover" label="Show Popover" onclick="{!c.handleShowPopover}"/>    
</aura:component>

CONTROLLER JS

({
    handleShowPopover : function(component, event, helper) {
        component.find('overlayLib').showCustomPopover({
            body: "Popovers are positioned relative to a reference element",
            referenceSelector: ".mypopover",
            cssClass: "slds-popover,slds-popover_walkthrough,slds-popover_feature,slds-nubbin_left,slds-p-around_x-small,slds-m-bottom_xx-large,popoverclass,cPopoverTest"
        }).then(function (overlay) {
            setTimeout(function(){ 
                //close the popover after 3 seconds
                overlay.close(); 
            }, 3000);
        });
    }
})

STYLE

.THIS .popoverclass {
    margin-bottom: 100px !important;
    border-style: solid !important;
    border-color: coral !important;
}