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'); }); } }; });
<div ng-app="myApp"> <span my-tooltip>Show Tooltip</span> <span id="tooltip" class="tooltip hidden">Tooltip Text</span> </div>
.tooltip { padding: 1em; background-color: #eee; display: inline-block; position: absolute; } .hidden { display: none; }