https://github.com/nickbreaton/tippy-angularjs
AngularJS (v1) directive for Tippy.js 3.
https://github.com/nickbreaton/tippy-angularjs
angularjs tippyjs
Last synced: 8 months ago
JSON representation
AngularJS (v1) directive for Tippy.js 3.
- Host: GitHub
- URL: https://github.com/nickbreaton/tippy-angularjs
- Owner: nickbreaton
- License: mit
- Created: 2019-02-04T01:12:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:59:26.000Z (over 3 years ago)
- Last Synced: 2025-08-25T18:49:55.359Z (10 months ago)
- Topics: angularjs, tippyjs
- Language: TypeScript
- Homepage: https://npm.im/tippy-angularjs
- Size: 607 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tippy AngularJS
AngularJS (v1) directive for [Tippy.js](https://github.com/atomiks/tippyjs) 3.
## Installation
```
npm i tippy-angularjs
```
## Usage
Place a `` 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
Increment
add one to the count
```
## 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
description
```
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`