tooltip.js

(function () {
    'use strict';
    angular.module('directives', [])
        .directive("lumHelpButton", directiveFunction);

    function directiveFunction() {
        var directive= {
            restrict: "E",
            scope: {
                text: "@text",
            },
            template:
            '<md-button ng-class="vm.buttonPressed ? \'md-accent\' : \'md-primary\'" ng-click="vm.helpClicked()">' +
                '<md-tooltip md-visible="vm.buttonPressed">{{text}}</md-tooltip>' +
                '<md-icon class="material-icons md-light md-48" aria-hidden="true"> help</md-icon>' +
            '</md-button>',
            controller: TooltipController,
            controllerAs: 'vm',
        };

        return directive;
    };

    function TooltipController() {
        var vm = this;

        vm.helpClicked = helpClicked;
        vm.buttonPressed = false;

        function helpClicked(){
            vm.buttonPressed = vm.buttonPressed === false ? true: false;
        }
    }
})();