pagarme-ng-tooltip
Pagar.me directive to provide simple a tooltip
here
Check the demoInstallation
Install via npm package manager:
$ npm install pg-ng-tooltip
Import the directive file into your project:
If you wish the same style of the example, import the css.
Load the pg-ng-tooltip module:
angular.module('myApp', ['pg-ng-tooltip']);
This directive needs a element to be placed which will be the tooltip element that will recieve the text and follow the cursor, should normally be placed right before the <body>
closing tag.
Given that the previous element is placed on your template file, you set as many triggers you want, just passing the respective text via attribute and voilà!.
Directive Optionals
You can make the tooltip escape html content by setting html="true"
on each trigger:
Showing tooltip class (default is showing
):
Choose the text node that will recieve the text:
You can set delays for the tooltip show and hide animations (set with milliseconds):
You can also set a timeout for the tooltip (set with milliseconds):
And that's it :D
Demo Images urls
Tesla: http://feelgrafix.com/data_images/out/24/945360-nikola-tesla.jpg
Carl Sagan: http://www.brainpickings.org/wp-content/uploads/2012/05/sagan1.jpg
Stephen Hawking: http://p1cdn05.thewrap.com/images/2014/10/Stephen-Hawking-Facebook-page.jpg