Really simple Angular tooltip directive that makes use of PNotify.

tooltipDirective.js

/*globals angular:false */
/* Tooltip directive */
(function (angular) {
  'use strict';

  var app = angular.module('app');

  //Actions are performed in here.
  app.directive('tooltip', function ($sce, $compile) {

    return {
      restrict: 'A',
      scope: {
        type: '=tooltipType',
        title: '=tooltipTitle',
        text: '=tooltipText'
      },
      link: function (scope, element, attributes) {
        var tooltip = null,
          notifyOptions = {
            delay: 2000,
            icon: 'fa fa-icon',
            addclass: 'stack-bottomright',
            stack: false,
            animate_speed: 0,
            auto_display: false,
            type: $sce.valueOf($sce.trustAsHtml(scope.type || 'info')), //notice, info, success, or error
            title: $sce.valueOf($sce.trustAsHtml(scope.title || 'Info')),
            text: $sce.valueOf($sce.trustAsHtml(scope.text || 'Information'))
          };

        /* Bindings */

        element
          .on('mouseenter', function (event) {
            //Copy the base so that we don't pollute it.
            var options = angular.copy(notifyOptions);

            tooltip = new PNotify(options);
            tooltip.open();

            scope.$digest();
          })
          .on('mousemove', function (event) {
            tooltip.get().css({
              'top': event.clientY + 12,
              'left': event.clientX + 12
            });
          })
          .on('mouseleave', function () {
            tooltip.get().remove();
            tooltip = null;

            scope.$digest();
          });

        /* Compile */

        $compile(tooltip)(scope);
      }
    };
  });
}(angular));