my take on popup tool-tips title replacements with Angular.js

tooltip.js

  /*
  Why include huge tooltip libraries when something like this does the job perfectly
  */
  app.directive('tooltip', [function () {
    return { link: function (scope, element, attr) {
      // use tag's title text for a popup
      element
        .addClass('tooltip-wrap')
        .append(angular.element('<div class="tooltip-text">'+attr.title+'</div>'))
        .attr('title', null);
    }};
  }]);

tooltip.scss

/*
  Style to your needs
*/
.tooltip-wrap {
  position: relative;
  .tooltip-text {
    @include transition(opacity 0.7s ease);
    @include opacity(0);
    position: absolute;
    width: 200%;
    text-align: center;
    left: -50%;
  }
  &:hover .tooltip-text {
      @include opacity(1);
  }
}