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;
}
  • In documentation, look at the bottom which talks about the workaround for your issue. maybe helpful. – Raul Jun 11 '18 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. – Lightning Evangelist Jun 11 '18 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 Jun 11 '18 at 15:55
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;
}

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.