# tippy-angularjs

> AngularJS (v1) directive for [Tippy.js](https://github.com/atomiks/tippyjs) 3.

Latest version **0.0.6** (published 2020-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install tippy-angularjs
pnpm add tippy-angularjs
yarn add tippy-angularjs
bun add tippy-angularjs
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2020-08-11 |
| First published | 2019-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 18.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nick Breaton |
| Maintainers | nickbreaton |

## Links

- npm: https://www.npmjs.com/package/tippy-angularjs
- Repository: https://github.com/nickbreaton/tippy-angularjs
- Homepage: https://github.com/nickbreaton/tippy-angularjs#readme
- Issues: https://github.com/nickbreaton/tippy-angularjs/issues
- npm.io page: https://npm.io/package/tippy-angularjs

## Dependencies (3)

- [lodash.keys](https://npm.io/package/lodash.keys.md) ^4.2.0
- [lodash.values](https://npm.io/package/lodash.values.md) ^4.3.0
- [lodash.flatmap](https://npm.io/package/lodash.flatmap.md) ^4.5.0

## Recent versions

- 0.0.6 (latest) — 2020-08-11
- 0.0.5 — 2019-02-05
- 0.0.4 — 2019-02-04
- 0.0.3 — 2019-02-04
- 0.0.2 — 2019-02-04
- 0.0.1 — 2019-02-04

## README

# Tippy AngularJS

AngularJS (v1) directive for [Tippy.js](https://github.com/atomiks/tippyjs) 3.

## Installation

```
npm i tippy-angularjs
```

## Usage

Place a `<tippy>` as a child of the element it describes.

```js
import tippyAngular from 'tippy-angularjs';
import 'tippy.js/dist/tippy.css';

angular.module('app', [tippyAngular]);
```

```html
<button>
  Increment
  <tippy>add one to the count</tippy>
</button>
```

## Native Attributes

The majority of options listed on the [All Options](https://atomiks.github.io/tippyjs/all-options/) page have been implemented.

Please ensure you pass them as kebab case. For example, `arrowType` should be implemented as:

```html
<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"` <br> `interactive="$ctrl.value"` |
| `object` | `<` one way | `popper-options="{ eventsEnabled: true }"` <br> `popper-options="$ctrl.options"` |
| `number` | `@` text | `distance="10"` <br> `distance="{{ $ctrl.value }}"` |
| `string` | `@` text | `arrow-type="sharp"` <br> `arrow-type="{{ $ctrl.value }}"` |
| `number, string` | `@` text | `max-width="350"` <br> `max-width="350px"` <br> `max-width="{{ $ctrl.maxWidth }}"` |
| `number, number[]` | `@` text | `duration="100"` <br> `duration="100 250"` <br> `duration="{{ $ctrl.duration[0] }} {{ $ctrl.duration[1] }}"` |
| `string, string[]` | `@` text | `flip-behavior="flip"` <br> `flip-behavior="top bottom"` <br> `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`. <br><br> `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. <br><br> `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`

---
_Source: https://npm.io/package/tippy-angularjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._