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

 

You might also like

AngularJS learning and examples:
jQuery plugins:
WordPress plugins and solutions: