pg-ng-tooltip
v1.0.3
Published
Pagar.me directive to provide simple a tooltip
Downloads
8
Readme
pagarme-ng-tooltip
Pagar.me directive to provide simple a tooltip
Check the demo here
Installation
Install via npm package manager:
$ npm install pg-ng-tooltipImport the directive file into your project:
<script src="node_modules/pg-ng-tooltip/dest/pg-ng-tooltip.min.js"></script>If you wish the same style of the example, import the css.
<link rel="stylesheet" type="text/css" href="dest/css/pg-ng-tooltip.min.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.
<div pg-ng-tooltip></div>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à!.
<div tooltip-trigger tooltip-text="Awesome text here!"></div>Directive Optionals
You can make the tooltip escape html content by setting html="true" on each trigger:
<div data-tooltip-trigger data-html="true" data-text="<strong>Awesome</strong> html <br /> content."></div>Showing tooltip class (default is showing):
<div pg-ng-tooltip showing-class="my-custom-class"></div>Choose the text node that will recieve the text:
<div pg-ng-tooltip text-node="span">
<span></span>
</div>
<div pg-ng-tooltip text-node="#text-node">
<span id="text-node"></span>
</div>
<div pg-ng-tooltip text-node=".text-node">
<span class="text-node"></span>
</div>You can set delays for the tooltip show and hide animations (set with milliseconds):
<div pg-ng-tooltip show-delay="800"></div>
<div pg-ng-tooltip hide-delay="800"></div>You can also set a timeout for the tooltip (set with milliseconds):
<div pg-ng-tooltip hide-timeout="3000"></div>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