https://github.com/al3xnag/ember-tippy
Ember Addon for Tippy.js tooltips and popovers [Not actively maintained]
https://github.com/al3xnag/ember-tippy
ember-addon not-actively-maintained tippyjs
Last synced: about 1 year ago
JSON representation
Ember Addon for Tippy.js tooltips and popovers [Not actively maintained]
- Host: GitHub
- URL: https://github.com/al3xnag/ember-tippy
- Owner: al3xnag
- License: mit
- Created: 2021-11-09T20:28:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-20T20:38:45.000Z (over 3 years ago)
- Last Synced: 2025-03-09T12:43:50.734Z (over 1 year ago)
- Topics: ember-addon, not-actively-maintained, tippyjs
- Language: JavaScript
- Homepage: https://nag5000.github.io/ember-tippy/
- Size: 861 KB
- Stars: 5
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
Tippy.js for Ember
[](https://badge.fury.io/js/ember-tippy)
[](https://github.com/nag5000/ember-tippy/actions/workflows/ci.yml)
This is an Ember wrapper for [Tippy.js](https://github.com/atomiks/tippyjs) with easy to use
modifier and component.
- Ember-tippy ❤️ Octane. No observers. No computeds. 0% Ember Classic.
- Powered by modern and up to date [Tippy.js](https://github.com/atomiks/tippyjs) and [Popper.js v2](https://popper.js.org/).
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.25 or above
* Ember CLI v3.25 or above
* ember-auto-import v2 or above
Dependencies
-----------------------------------------------------------------------------
* tippy.js ^6.0.0. It's a peer dependency. The default addon blueprint will add tippy.js to
your package.json during install.
* ember-auto-import ^2.0.0
* ember-modifier ^3.0.0
Installation
------------------------------------------------------------------------------
```
ember install ember-tippy
```
Demo and Usage
------------------------------------------------------------------------------
This addon provides a modifier `{{tippy}}` and a component ``.
Here are some basic usage examples:
``` hbs
My Button
```
``` hbs
My Button
I'm a Tippy tooltip!
```
You can see the demos and all the examples here: https://nag5000.github.io/ember-tippy/.
Supported Features
------------------------------------------------------------------------------
ember-tippy supports [all tippy.js options](https://atomiks.github.io/tippyjs/v6/all-props/).
[Singleton](https://atomiks.github.io/tippyjs/v6/addons/#singleton) is supported via
`` component.
[Headless Tippy](https://atomiks.github.io/tippyjs/v6/headless-tippy/) is supported via
`` component.
All the [Plugins](https://atomiks.github.io/tippyjs/v6/plugins/) also should work:
just use them the same way as for vanilla tippy.js.
Please see the demos and examples here: https://nag5000.github.io/ember-tippy/.
API
------------------------------------------------------------------------------
Please see the [API](API.md).
Build-time Config and Imports
------------------------------------------------------------------------------
ember-tippy does not import any
[optional extra stuff](https://atomiks.github.io/tippyjs/v6/getting-started/#optional-extra-imports)
from tippy, except
[Tippy Core CSS](https://atomiks.github.io/tippyjs/v6/getting-started/#1-package-manager).
If you don't want to bundle Tippy Core CSS, you can disable it by using
`shouldIncludeTippyCoreCss: false` in ember-tippy build-time config.
If you want to use tippy's built-in custom themes, arrows or animations, please refer to
[this example](https://nag5000.github.io/ember-tippy/#themes). Configurable bundling of optional
extra tippy stuff at build-time could be implemented in the future.
`` also imports
[`createSingleton`](https://atomiks.github.io/tippyjs/v6/addons/#singleton).
If you don't use this component and you are on embroider, it should be tree-shaken.
Below is the ember-tippy build-time config with defaults:
``` js
// ember-cli-build.js
let app = new EmberApp(defaults, {
'@embroider/macros': {
setConfig: {
'ember-tippy': {
shouldIncludeTippyCoreCss: true,
},
},
},
});
```
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).