ember-async-tooltips

ember-async-tooltips

       

Installation

ember install ember-async-tooltips

Demo

https://amk221.github.io/ember-async-tooltips

Example

When tool-tipper/example is hovered over, the tool-tip/example component will be rendered in a place of your chosing in the DOM.

{{#tool-tipper/example tooltip=(component 'tool-tip/example')}}
  Hover over me
{{/tool-tipper/example}}

Tooltips will be rendered here:

{{render-active-tooltips}}

Features

• Manual positioning either: N, NE, E, SE, S, SW, W, NW
• Automatic positioning: Viewport is split into rows and columns which help determine where a tooltip should be optimally positioned
• Can specify delay before the tooltip will show/hide on a per-tooltip or per-class basis
• Can optionally wait for async data to be loaded and passed to the tooltips without negatively affecting the hover delay.

Prerequisites

• It is assumed that all your tooltips will animate in and out. For this reason you are required to add the following styles:

.your-tooltip.is-showing {
  animation: your-show-animation;
}

.your-tooltip.is-hiding {
  animation: your-hide-animation;
}

• In order to detect when a tooltip has animated out your application must be informed of animation events. Add the following to app/app.js

customEvents: {
  webkitAnimationEnd: 'animationEnd',
  msAnimationEnd: 'animationEnd',
  oAnimationEnd: 'animationEnd',
  animationend: 'animationEnd'
}

Recommended usage

It is recommended that you don't use tool-tip and tool-tipper components directly, but instead extend them to create your own.

For example, the following configuration creates a new tooltip that:

• Has custom automatic positioning: NW, N, NE, SE, S, SW. Excludes W and E - useful if you don't want to add CSS for these positions.
• Has a custom hover delay (won't display the user tooltip until after 300ms has passed)
• Loads the user during the alotted hover delay time period, or extending the delay if it wasn't retreived in time

// tool-tipper/user.js
import ToolTipperComponent from 'ember-async-tooltips/components/tool-tipper';

export default ToolTipperComponent.extend({
  classNames: ['user-tooltipper'],
  hoverDelay: 300
});

// tool-tip/user.js
import ToolTipComponent from 'ember-async-tooltips/components/tool-tip';

export default ToolTipComponent.extend({
  classNames: ['user-tooltip'],
  columns: 3,
  rows: 2
});

  {{! application.hbs }}
  {{#tool-tipper/user on-load=(action 'loadUser' user.id) tooltip=(component 'tool-tip/user')}}
    {{user.name}}
  {{/tool-tipper/user}}

  {{! tool-tip/user.hbs }}
  Hello {{data.user.name}}

Manual positioning

Setting the placement attribute will add left and right CSS properties based upon the compass points. This will position the tool-tip around the outside edge of the tool-tipper component that caused it to display.

  {{tool-tipper/example tooltip=(component 'tool-tip/example' placement='NW')}}

Automatic positioning

The tooltip will be positioned around the outside edge of the tool-tipper component that caused it display by chosing the most appropriate compass point. For example: If the tool-tipper component is at the very bottom of the viewport (south), then the tool-tip component will be displayed above the tool-tipper (north) - so as to remain visible.

  {{tool-tipper/example tooltip=(component 'tool-tip/example')}}

Changelog

1.0.4

• Upgrade devDependencies