Angular Tooltip

Simple and extensible abstraction for tooltips with AngularJS. Based on tether.

Installation

Install with bower:
```
$ bower install ng-modal --save-dev
```

Include angular-tooltip and tether:

<script src="/bower_components/tether/tether.js"></script>
<script src="/bower_components/angular-tooltip/dist/angular-tooltip.js"></script>

Usage

Simple Tooltips

Angular Tooltip gives you an ng-tooltip directive that you can use for simple text only tooltips:

<a href="" ng-tooltip="Click Me!">Go</a>

Advanced Tooltips

While the directive is nice for simple tooltips that are text based, more often than not you want to show dynamic content within the tooltip. Angular Tooltip gives you a $tooltip service to build tooltips. The object returned by this function provides you with open and close methods that you can use to show and hide the tooltip.

module.directive('myTooltip', function($tooltip) {
  return {
    restrict: 'EA',
    scope: { show: '=myTooltip' },
    link: function(scope, elem) {
      var tooltip = $tooltip({
        target: elem,
        scope: scope,
        templateUrl: 'template/my-tooltip.html'
      });

      scope.$watch('show', function(value) {
        if (value) {
          tooltip.open();
        } else {
          tooltip.close();
        }
      })
    }
  };
});

Animations

Angular Tooltip uses ngAnimate under the hood, so you can easily add animation support to your tooltips with the ng-enter and ng-leave classes.

License

elpic/angular-tooltip

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages