AngularJS (v1) directive for Tippy.js 3.
npm i tippy-angularjs
Place a <tippy>
as a child of the element it describes.
import tippyAngular from 'tippy-angularjs';
import 'tippy.js/dist/tippy.css';
angular.module('app', [tippyAngular]);
<button>
Increment
<tippy>add one to the count</tippy>
</button>
The majority of options listed on the All Options page have been implemented.
Please ensure you pass them as kebab case. For example, arrowType
should be implemented as:
<tippy arrow-type="sharp">description</tippy>
AngularJS provides a few ways for defining attributes. Please see the following table to understand how to properly set attributes.
Type | Binding | Example |
---|---|---|
boolean |
< one way |
interactive="true" interactive="$ctrl.value" |
object |
< one way |
popper-options="{ eventsEnabled: true }" popper-options="$ctrl.options" |
number |
@ text |
distance="10" distance="{{ $ctrl.value }}" |
string |
@ text |
arrow-type="sharp" arrow-type="{{ $ctrl.value }}" |
number, string |
@ text |
max-width="350" max-width="350px" max-width="{{ $ctrl.maxWidth }}" |
number, number[] |
@ text |
duration="100" duration="100 250" duration="{{ $ctrl.duration[0] }} {{ $ctrl.duration[1] }}" |
string, string[] |
@ text |
flip-behavior="flip" flip-behavior="top bottom" flip-behavior="{{ $ctrl.valueX }} {{ $ctrl.valueY }}" |
Function |
& expression |
on-hide="$ctrl.log('hide')" |
Directive | Binding | Description |
---|---|---|
class |
@ text |
Applys a class to the content wrapper div . class="block__element--modifier" |
on-create |
& expression |
Is executed when the instance is created. $instance is avaiable to get a reference to the current instance. on-create="$ctrl.log($instance)" |
allow-html
append-to
append-to
boundary
follow-cursor
hide-on-click
should-popper-hide-on-blur
wait