ng-tooltip is a felxible Angular tooltip with a lot of handy options.
- multiple tooltips at the same time.
- HTML content
- borders
- great set of flexibility options
- Angular 1.x
- bower install ng-tooltip
Reference JS and CSS files:
<script type="text/javascript" src="/bower_components/ng-tooltip/ng-tooltip.js"></script>
<link rel="stylesheet" href="/bower_components/ng-tooltip/ng-tooltip.css" />Include ng-tooltip as dependency:
// Add ng-tooltip as a dependency to your app
angular.module('your-app', ['ng-tooltip']);Examples:
<!-- Simple Content -->
<div id="title">Title</div>
<tooltip on="hover" handle="title" position="bottom">
Tooltip simple content
</tooltip>
<!-- HTML Content -->
<div id="another-title">Another Title</div>
<tooltip on="click" handle="another-title" position="right">
<strong>Html Tooltip Content</strong>
<br/>
<p>bla bla bla</p>
</tooltip>| Option | Description | Values | Default |
|---|---|---|---|
| handle | an id of the element (without '#') | ||
| on | event that triggers the tooltip | hover/click | hover |
| position | placement of the tooltip | top/bottom/right/left | bottom |
| disabled | ng-model that disable/enable popup | true/false | false |
| animate | animate popup or not | true/false | true |
| animate-time | animation time in milliseconds | 500ms | |
| css-class | css classes to use for dimentions, shadows, ... | valid css class names | |
| border-width | border width | width valid values | 1px |
| border-color | border color | color valid values | black |
| arrow | show arrow or not | true/false | true |
| arrow-size | size in pixels | valid px value | 10 |
| arrow-top-offset | distance in px or % from the top side of the tooltip | 10px | |
| arrow-left-offset | distance in px or % from the left side of the tooltip | 10px |
MIT