Lightning components - expressions in styling issue

Question

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" > 
...
</section>

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 '}" />

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) {
    component.set('v.showNubbin',!component.get('v.showNubbin'));            
},