Search code examples
angularjsmouseoverclosestmousehover

Angular- Getting closest element on mouseover

I'm new to Angular JS and i'm trying to create a small web app for learning.. I am trying to make a Tooltip text on mouseover but i'm not sure how to get it done the "Angular way"..

I created 2 spans, when hovering the first, i want to show the second

I tried using ng-mouseover and ng-mouseleave to call the actions-

<span class="info" ng-mouseover="info_in();" ng-mouseleave="info_out();">
    <img src="images/info.png" />
</span>

<span class="info_bubble" ng-show="info">The Tooltip Text</span>

And that's where i got with the JS-

$scope.info_in = function() {
    this.parent().find('.info_bubble') = true;
};

$scope.info_out = function() {
    this.parent().find('.info_bubble') = false;
};

There are going to be more than 1 Tooltip text on each page and i'm not sure how to get it done.. I tried with "next()" and "closest()" but couldn't get it to work

When i try to mouseover the element, i get "this is not a function"

Solution

  • You've got the right idea but your implementation is moving toward the jQuery way, not the Angular way. :)

    Try this:

    <span class="info" ng-mouseover="info=true" ng-mouseleave="info=false">
    <img src="images/info.png" />
</span>

<span class="info_bubble" ng-show="info">The Tooltip Text</span>

    No controller code is necessary for this to work.

    What you're doing is that when the mouse enters the image, Angular will set $scope.info to true. And since your tooltip is watching that scope variable, it will trigger the ng-show directive to fire which will show your tooltip.

    The ng-show directive can be translated as: When $scope.info == true, then show() this element. When $scope.info == false, then hide() this element.

    In fact, you could be more verbose (which is good for learning) writing your tooltip element like this:

    <span class="info_bubble" ng-show="info==true">The Tooltip Text</span>

    I notice that you're using the jQuery method of specifically trying to find an element in the DOM in order to work with it.

    The Angular way is to change variables on the $scope. Other HTML elements will monitor variables on the $scope and will automatically change themselves depending on what the new value is. The jQuery way is to reach out and specifically touch and set a value on a DOM element. The Angular way is akin to shouting to the wind, "Hey, my name is $scope.info and I'm now true!" and expecting that some other element will hear it and go, "Ok cool, now I can show myself because $scope.info is true."

    That's the main difference between the way jQuery and Angular work.