Angular

AngularJS ‘mouseleave’ event : error and solution

Angular JS

While working on AngularJS directives, you would might have to tweak the UI on mouse over. If you use mouseleave event, you might get an error (specifically in IE)

AngularJS directive mouseleave error

Solution

<!doctype html>
<html>
<head></head>
<body ng-app="myApp">
  <span my-tooltip>Show Tooltip</span>
  <span id="tooltip" class="tooltip hidden">Tooltip Text</span>
  <script>
    angular
      .module('myApp', [])
      .directive('myTooltip', function () {
        return {
          restrict: "A",
          link: function (scope, element, attrs) {
            var tooltipText = angular.element(tooltip);
            element.bind('mouseover', function () {
              tooltipText.removeClass('hidden');
            });
            // 'mouseleave' causing an issue, use 'mouseout'.
            element.bind('mouseout', function () {
              tooltipText.addClass('hidden');
            });
          }
        };
      }]);
</script>
</body>
</html>

Live demo