[SalesForce] How to pass Button Value on mouseover to controller Aura Component

I have component which shows dynamically available buttons to User. I want to add Hover text onmouseover. Ideally Button value should be set as v.hoverbutton, so I can display repsective text based on that.

Component:

<aura:iteration items="{!v.options}" var="option">
    <div class="slds-col slds-align_absolute-center slds-m-bottom_small">
        <div value="{!option.value}">
            <div aura:id="hover" onmouseover="{!c.hoverButton}" onmouseout="{!c.buttonMouseOut}">
                <lightning:button
                    class="navButton2 animated maxWidth isNotMobileButton"
                    onclick="{!c.optionChange}"
                    value="{!option.value}"
                    title="{!option.title}"
                    disabled="{!v.showSpinner}"
                >
                    <lightning:icon
                        class="iconMarg isNotMobile"
                        iconName="{!option.imageName}"
                        size="large"
                        variant="{!option.variant}"/>
                    <h2 class="buttonText" aura:id="text2">{!option.label}</h2>
                </lightning:button>
            </div>
        </div>
    </div>
</aura:iteration>

Controler:

hoverButton : function(component, event, helper){
    var caseType = event.getSource().get("v.value");
    component.set('v.hoverButton', caseType);
    //helper.showText(component, event, helper);
}

Currently it look like that but i get an error

Action failed: c:bCom_CaseNavigation$controller$hoverButton [event.getSource is not a function]", …}

Best Answer

Since you are using a mouseover event on div the event.getsource() will not work. event.getSource is limited to lightning:button instead, you need to pass the parameter as a data attribute and access in js using event.target.getAttribute("data-attribute-name"). the data attributes are part of the HTML standard and should work on all standard HTML elements.

Here is a sample code:

Component:

    <aura:attribute name="options" type="List"/>

    <aura:iteration items="{!v.options}" var="option">
        <div class="slds-col slds-align_absolute-center slds-m-bottom_small">
            <div value="{!option.value}">
                <div aura:id="hover" onmouseover="{!c.hoverButton}" data-value="{!option.value}">
                    <lightning:button label="{!option.title}"
                                      class="navButton2 animated maxWidth isNotMobileButton"
                                      onclick="{!c.optionChange}"
                                      value="{!option.value}"
                                      title="{!option.title}"
                                      disabled="{!v.showSpinner}"
                                      >
                    </lightning:button>
                </div>
            </div>
        </div>
    </aura:iteration>
</aura:component>

Javascript:

hoverButton: function(component, event, helper) {
    var caseType = event.target.getAttribute("data-value");
    component.set('v.caseType', caseType);
}
Related Topic