I have a custom popup component for displaying help text near form fields.
I wanted to make it more dynamic - make the position of the nubin a component attribute. And Now I'm facing a strange behaviour I don't understand. This is the original code:

<button  class="slds-button slds-button_icon" onclick="{!c.handleToggle}" />

<section aura:id="helpPopup" class="slds-popover slds-nubbin_left-top slds-hide" > 

and the controller's code to toggle visibility of popup on button click

handleToggle:function(component, event, helper) {
    var help = component.find("helpPopup");
    $A.util.toggleClass(help, 'slds-hide');            

the code above works well, this code also works well (class replaced with expression)

<section aura:id="helpPopup" class="{! 'slds-popover slds-nubbin_left-top slds-hide'}" />

But this prevents popup from showing up although the html code looks identical

    <aura:attribute name="nubinSldsClass" type="String" default=" slds-nubbin_left-top" />        <!--  -->

    <section aura:id="helpPopup" class="{! 'slds-popover '+v.nubinSldsClass+' slds-hide '}" />
  • I had a look at the Aura code in the debugger and in the remove class case got to var oldClass = element.$getShadowAttribute$(attribute); returning an empty string for the attribute "v.HTMLAttributes.class" which then stopped the method doing anything because of a later oldClass !== constructedClass check: no "slds-hide' required and none present so do nothing. So at first sight it looks like a bug...
    – Keith C
    Commented Jan 2, 2018 at 15:11

1 Answer 1


I had faced the same problem many time. If we use the expression for class in cmp file then I was not able to add classes dynamically in js.

so there are 2 ways either make your whole logic of adding classes in expression or in js.

you can have one private attribute lets say showHide nubbin.

<aura:attribute name="showNubbin" type="Boolean" default="true" />
<section aura:id="helpPopup" class="{!join(' ','slds-popover ',v.nubinSldsClass,(v.showNubbin ? '' , 'slds-hide'))}" />

in js

handleToggle:function(component, event, helper) {

You must log in to answer this question.

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