Tooltip directive, some day I'll bring you back to life old friend

gistfile1.js

'use strict';


angular.module('app.sell').directive('tooltip', function() {
    return {
        restrict: 'EA',
        transclude: true,
        scope: {
            text: '@'
        },
        template: '<span ng-transclude ng-click="state.toggle()"></span><i class="tooltip-arrow icon-arrow-up2" ng-show="state.display"></i><div class="tooltip-container" ng-show="state.display">' + '<span class="tooltip-close" ng-click="state.hide(); $event.stopPropagation();">X</span>' + '<p>{{text}}</p></div>',
        controller: function($scope, $element, $rootScope) {
            $scope.state = {
                display: false,
            };

            $scope.$on('close-all-tooltips', function() {
                $scope.state.display = false;
            });

            $scope.state.toggle = function() {
                if(!$scope.state.display){
                    $rootScope.$broadcast('close-all-tooltips');
                }
                $scope.state.display = !$scope.state.display;
            };

            $scope.state.show = function() {
                $rootScope.$broadcast('close-all-tooltips');
                $scope.state.display = true;
            };
            $scope.state.hide = function() {
                $scope.state.display = false;
            };
        }
    };
});