pg-ng-tooltip
Advanced tools
Pagar.me directive to provide simple a tooltip
Install via npm package manager:
$ npm install pg-ng-tooltip
Import 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>
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
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
FAQs
Pagar.me directive to provide simple a tooltip
The npm package pg-ng-tooltip receives a total of 1 weekly downloads. As such, pg-ng-tooltip popularity was classified as not popular.
We found that pg-ng-tooltip demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket found a Rust typosquat (finch-rust) that loads sha-rust to steal credentials, using impersonation and an unpinned dependency to auto-deliver updates.
Research
/Security Fundamentals
A pair of typosquatted Go packages posing as Googleâs UUID library quietly turn helper functions into encrypted exfiltration channels to a paste site, putting developer and CI data at risk.
Security News
November CVE publications fell 25% YoY even as 2025 totals rose, showing how a few major CNAs can swing âglobalâ counts and skew perceived risk.
