Tippy-angularjs NPM

Tippy AngularJS

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)"`

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago