https://github.com/remind101/angular-tooltip
Simple and extensible tooltips for angularjs
https://github.com/remind101/angular-tooltip
Last synced: over 1 year ago
JSON representation
Simple and extensible tooltips for angularjs
- Host: GitHub
- URL: https://github.com/remind101/angular-tooltip
- Owner: remind101
- License: mit
- Created: 2014-01-29T16:13:26.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-07-10T04:09:27.000Z (about 11 years ago)
- Last Synced: 2025-04-20T05:03:17.327Z (over 1 year ago)
- Language: JavaScript
- Size: 210 KB
- Stars: 41
- Watchers: 88
- Forks: 33
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Angular Tooltip
**NOTE**: This repo is not maintained. You might want to try one of the [many forks](https://github.com/remind101/angular-tooltip/network) instead.
Simple and extensible abstraction for tooltips with AngularJS. Based on
[tether](http://github.hubspot.com/tether/).
## Installation
1. Install with bower:
```bash
$ bower install ng-modal --save-dev
```
2. Include angular-tooltip and tether:
```html
```
## Usage
### Simple Tooltips
Angular Tooltip gives you an `ng-tooltip` directive that you can use for simple
text only tooltips:
```html
Go
```
### 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.
```javascript
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.