Lightning problem with component.find("").getElements()

Question

I have a component

<div class="tooltip" onmouseover="{!c.hover}">
    <div >
            <div >
               Test Test Test
            </div>
    </div>
    <div aura:id="textId" class="tooltiptext">
        <div>Test Code</div>
    </div>
</div> </aura:component>

Css applied is

.THIS.tooltip { 
    position: relative;
    display: inline-block; 
}  

.THIS .tooltiptext { 
    visibility: hidden; 
    position: absolute; 
    word-wrap:break-word; 
    text-align: justify; 
}  

.THIS.tooltip:hover .tooltiptext {
    visibility: visible; 
}

now in controller i want to use

hover :(component){ component.find("textId").getElements(); }

error i am getting is

[component.find(...).getElements is not a function]

this error occurs if locker service is enabled.

Is there any way to use component.find("").getElements() on div which is hidden?

Answer 1

I have done some POC on this component and found out that i was using component.find("") on textId div on init of component. then afterwards whenever i was trying to use component.find(“textId”).getElements() on that div it was giving error because component.find(“textId”) was returning secure component reference. i changed my init method and added my logic onmouseover event now i am able to use component.find(“”).getElements().

Answer 2

I've copied your exact same code and everything is working fine with LockerService on. I see 2 potential issues here.

1) You have multiple elements with aura:id="textId" in your markup. This would cause component.find("textId") to return an array of components and calling getElements() on the array will give you the error you report.

2) If it really is only happening with LockerService activated, your call to component.find() is likely returning a SecureComponentRef which doesn't have getElements defined on it, rather than a SecureComponent which does. This typically means you're trying to get a reference to a component that isn't in your current namespace. Are all components and the controller that makes the getElements() call in your namespace?

Answer 3

You cannot write your javascript code in the css - you need to to that in the component's controller.

From there you can code your component.find("textId") and handle your css values.