tooltips | Angularjs directive for easier tooltips

angular-tooltips directive

angular-tooltips

Stars : 10

Forks : 10

Created by 720kb

bower install angular-tooltips

Demo Download GitHub

 

Angular Tooltips

Angular Tooltips is an angularjs directive that generates a tooltip on your element.

The angular tooltips is developed by 720kb.

Requirements

AngularJS v1.2+

Screen

Angular tooltips

Browser support

Chrome ok

Firefox ok

Safari ok

Opera ok

IE mmm

Load

To use the directive, include the angular tooltips’s javascript and css files in your web page:

<!DOCTYPE HTML>
<html>
<head>
  <link href="src/css/angular-tooltips.css" rel="stylesheet" type="text/css" />
</head>
<body ng-app="app">
  //.....
  <script src="src/js/angular-tooltips.js"></script>
</body>
</html>

Install

Bower installation

$ bower install angular-tooltips --save

then load the js files in your html

Add module dependency

Add the 720kb.tooltips module dependency

angular.module('app', [
  '720kb.tooltips'
 ]);

Call the directive wherever you want in your html page

<a href="#" tooltips title="tooltip">Tooltip me</a>

Options

Angular tooltips allows you to use some options via attribute data

Tooltip position

You can set your tooltip to show on left or right or top or bottom position using the tooltip-side="" attribute

<a href="#" tooltips title="tip" tooltip-side="top">Tooltip me</a>
<a href="#" tooltips title="tip" tooltip-side="bottom">Tooltip me</a>
<a href="#" tooltips title="tip" tooltip-side="left">Tooltip me</a>
<a href="#" tooltips title="tip" tooltip-side="right">Tooltip me</a>

Tooltip content

You can set your tooltip content (text/html doesn’t matter) using the tooltip-content="" attribute

<a href="#" tooltips title="Tooltip" tooltip-content="<i>Woa!</i>">Tooltip me</a>

Tooltip size

You can set your tooltip size (small || medium || large) using the tooltip-size="" attribute

<a href="#" tooltips title="tip" tooltip-size="small">Tooltip me</a>
<a href="#" tooltips title="tip"tooltip-size="medium">Tooltip me</a>
<a href="#" tooltips title="tip" tooltip-size="large">Tooltip me</a>

Javscript

Javascript plugin

Angular-js