3

There are list of rows, When I hover on particular row this popup should be activated. How this can be done. Whenever I hover i get data popup works fine but it flickers a lot :(

This is my component.

<aura:iteration items="{!v.SelectedWrapperItems}" var="vSWI" indexVar="index">
    <a href="{!'/one/one.app?#/sObject/' +vSWI.owOLI.OpportunityProductBundle__c + '/view'}"
       data-recId="{!vSWI.owOLI.OpportunityProductBundle__c}" data-index="{!index}"
       target="_blank" onmouseenter="{!c.handleMouseOver}" onmouseout="{!c.handleMouseOut}" 
       tabindex="-1">

        {!vSWI.owOLI.OpportunityProductBundle__r.Name}
        <aura:if isTrue="{!v.hoverRow==index}">
            <div style="padding-left: 2rem; padding-top: 5rem; position: relative;">
                <div class="slds-popover slds-popover_tooltip slds-nubbin_top-left slds-rise-from-ground" 
                    role="tooltip" id="help" style="position: absolute; top: 0px; left: 15px;">
                    <div class="slds-popover__body"> 
                        Id: {!v.hoveropb.Id}
                        Name: {!v.hoveropb.Name}
                    </div>
                </div>
            </div>    
        </aura:if>      
    </a>
</aura:iteration >

This is my JS

handleMouseOver : function(component,event,helper){
    var id1=event.currentTarget.getAttribute("data-recId");
    var action=component.get("c.getopportunityBundleProducts");
    action.setParams({
        "bid":id1 
    });
    action.setCallback(this,function(re) { 
        var state=re.getState(); 
        if(state==='SUCCESS'){
            var items = component.find("hoveron");
            component.set("v.hoverRow", parseInt(event.target.dataset.index));
            component.set("v.hoveropb",re.getReturnValue());
        } 
    }); 
    $A.enqueueAction(action); 
},
handleMouseOut : function(component,event,helper){
    component.set("v.hoverRow",-1);
}

My screencast

Improve this question
5
  • Would it be possible to provide a short animation that visualizes the problem, or something we can copy-paste that exhibits the same behavior?
    – sfdcfox ♦
    Commented May 30, 2018 at 13:39
  • I have added the link to my question sfdcfox.
    – Arvind
    Commented May 30, 2018 at 16:16
  • 1
    It looks like there's something wrong with your styles. What's happening is that on mouseover, your row is growing in height, which triggers the mouseout, which shrinks the row, which triggers the mouseover... However, I'm not sure if the problem is here, or in the surrounding code.
    – sfdcfox ♦
    Commented May 30, 2018 at 16:35
  • Can you help me with any other working solutions. I am at stake, at this moment. pretty high dependencies :(
    – Arvind
    Commented May 30, 2018 at 16:54
  • 1
    Try using onmouseleave instead of onmouseout event. This might help, if yes, let me know, Thank you
    – Jayanth G
    Commented Jul 30, 2019 at 3:28

1 Answer 1

Reset to default
1

Use onmouseleave don't use onmouseout.

Improve this answer

You must log in to answer this question.

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