1

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]", …}

  • Please edit your question to provide formatted sample code and what actually you are trying to achieve. – Anmol Kumar Mar 13 at 11:06
  • are you trying to get a tooltip? if yes, you can refer: developer.salesforce.com/docs/component-library/bundle/… – Abhijith E Mar 13 at 11:13
  • no not a tooltip , I know how to do it with tooltip, I want to show text below button, once You mouse over a specific button. It basically work when I set it like below, however it should be set dynamically for each button iterrrated in component : hoverButton : function(component, event, helper){ component.set('v.hoverButton', 'Order'); – ANeta Mar 13 at 11:19
0

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);
}
| improve this answer | |
  • 1
    Thank You! That works perfectly! – ANeta Mar 13 at 13:17

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.