3

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.

enter image description here

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;
}
3
  • In documentation, look at the bottom which talks about the workaround for your issue. maybe helpful.
    – Raul
    Commented Jun 11, 2018 at 15:25
  • Are you referring to the part where they mention "cssClass: "slds-nubbin_left,slds-popover_walkthrough,no-pointer,cMyCmp"? I set it as "cssClass: "slds-popover,slds-popover_walkthrough,slds-popover_feature,slds-nubbin_left,slds-p-around_x-small,slds-m-bottom_xx-large,popoverclass,cPopoverTest" but no dice. Commented Jun 11, 2018 at 15:49
  • Specifically refer to this line: The pointer is hidden and replaced by the slds-nubbin_left class. To hide the pointer, add the following CSS rule.
    – Raul
    Commented Jun 11, 2018 at 15:55

1 Answer 1

3

I believe you need to assign the class to the component itself:

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

The following is working for me:

cMyCustomRowComponentController.js

cssClass: "no-pointer,cMyCustomRowComponent"

cMyCustomRowComponent.css

.THIS.no-pointer .pointer {
  visibility: hidden;
}

You must log in to answer this question.

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