Simple and extensible abstraction for tooltips with AngularJS. Based on tether.
-
Install with bower:
$ bower install angular-tooltip --save
-
Include angular-tooltip and tether:
<script src="/bower_components/tether/tether.js"></script> <script src="/bower_components/angular-tooltip/dist/angular-tooltip.js"></script>
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>
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();
}
})
}
};
});
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.