Need to do without CSS+HTML I want to show a custom label on hover. I am using below code

<aura:attribute name="isHover" type="Boolean" default="true" />
  <div class="cardtext">
          <a onmouseover="{!c.mouseOverHandler}">
            <aura:if isTrue="{isHover}">
              <div class="imageCards innerText_5G_NES_Support">


    mouseOverHandler: function(event){
        console.log("inside mouseOverHandler");

Log is not printing

  • Do you see any error in console? This may be also possible with CSS, that'd be easier for maintenance- stackoverflow.com/questions/5210033/… – Raul Apr 15 at 11:13
  • No @Raul, no errors in console. Need to do in JS itself. – Gargi Gupta Apr 15 at 11:17
  • 2
    I wouldn't expect it to cause the log to be missing, but your function should receive the component and event as separate parameters... function(component, event, helper) – Phil W Apr 15 at 11:31
<aura:if isTrue="{isHover}">

Should be:

<aura:if isTrue="{!v.isHover}">

Having errors like this in your code may cause the code not to deploy, or cause unexpected behavior even if it does.

Testing this in my org, the output is indeed correct once you fix the merge field.

Also, all controller events in Aura always receive three parameters: component, event, and helper (which may be undefined/null if you do not define a helper file).

  • but aura:if is server side, should we use it to render on browser? – Gargi Gupta Apr 15 at 15:21
  • +! I am so glad now we have LWC and not need to deal with the v. prefix for the variable. We have been burned by this small mistake so many times with aura. – Raul Apr 15 at 15:26
  • @GargiGupta aura:if is client-side. – sfdcfox Apr 15 at 16:12

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.