Tippy.js for Ember

This is an Ember wrapper for Tippy.js 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 and Popper.js v2.

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 ^2.0.0 || ^3.0.0

Installation

ember install ember-tippy

Demo and Usage

This addon provides a modifier {{tippy}} and a component <Tippy>.

Here are some basic usage examples:

<button {{tippy "I'm a Tippy tooltip!"}}>My Button</button>

<button>
  My Button
  <Tippy>I'm a <b>Tippy</b> tooltip!</Tippy>
</button>

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.

Singleton is supported via <TippySingleton> component.

Headless Tippy is supported via <HeadlessTippy> component.

All the 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.

Build-time Config and Imports

ember-tippy does not import any optional extra stuff from tippy, except Tippy Core CSS.

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. Configurable bundling of optional extra tippy stuff at build-time could be implemented in the future.

<TippySingleton> also imports createSingleton. 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:

// ember-cli-build.js
let app = new EmberApp(defaults, {
  '@embroider/macros': {
    setConfig: {
      'ember-tippy': {
        shouldIncludeTippyCoreCss: true,
      },
    },
  },
});

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.