ng-tooltip

ng-tooltip is a felxible Angular tooltip with a lot of handy options.

Why ng-tooltip? ... because it supports:

• multiple tooltips at the same time.
• HTML content
• borders
• great set of flexibility options

Dependencies

• Angular 1.x

Installation

• bower install ng-tooltip

Usage

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>

Options

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

License

MIT