Tippy AngularJS

AngularJS (v1) directive for Tippy.js 3.

Installation

npm i tippy-angularjs

Usage

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>

Native Attributes

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

AngularJS Specific Attributes

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

Unimplemented Attributes

• allow-html
• append-to
• append-to
• boundary
• follow-cursor
• hide-on-click
• should-popper-hide-on-blur
• wait