❤
npm
Sign UpSign In

pg-ng-tooltip

1.0.3 • Public • Published

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-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>

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

Rafael Violato @ pagar.me

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

Readme

Keywords

Package Sidebar

Install

npm i pg-ng-tooltip

Repository

github.com/pagarme/pg-ng-tooltip

Homepage

github.com/pagarme/pg-ng-tooltip

Weekly Downloads

8

Version

1.0.3

License

MIT

Last publish

Collaborators

  • pagarme-opensource
  • matheusvellone
  • lucianopf
  • marquinhoalm
  • zignd
  • cigoli
  • geraldofada-pagarme
  • gabilleone
  • ramonpaolo-pagarme
  • davidsmedeiros
  • andre.lsilva
  • bruno.mduarte
  • nathaliacrelier
  • jonasnt17
  • danielponde
  • joaovjs-pagarme
  • rpsantos1987
  • prifight
  • carolinaaguelera
  • gabrielpagarme
  • magnomoreira
Try on RunKit
Report malware