README
ember-popups
A utility for adding tooltips and popup items to an in Ember.js app.
Usage
Installation
ember install @abcum/ember-popups
Introduction
The ember-popups addon adds functionality for adding tooltip popups and item popups to an Ember.js app. A popup item can be created by embedding within the target item, and becomes visible on either click or hover events.
Examples
Add the popup-outlet
component to your application template.
{{!-- app/templates/application.hbs --}}
{{popup-outlet}}
Display a tooltip on an element.
<div id="info">
Click for more information
{{#popup-info side='n'}}
Here is some more information.
{{/popup-item}}
</div>
Or show a popup when clicking on an element.
<div>
Click for more information
{{#popup-item show='click' hide='click'}}
Here is some more information.
{{/popup-item}}
</div>
Or show a popup when hovering over an element.
<div>
Hover for more information
{{#popup-item show='hover' hide='hover'}}
Here is some more information.
{{/popup-item}}
</div>
Or enable pressing the escape key to hide a popup.
<div>
Hover for more information
{{#popup-item show='hover' hide='hover escape'}}
Here is some more information.
{{/popup-item}}
</div>
Or to specify a custom class for the popup item.
<div>
Hover for more information
{{#popup-item show='hover' hide='hover' itemClass='tooltip'}}
Here is some more information.
{{/popup-item}}
</div>
Or use a separate template for the popup item content.
<div>
Click for more information
{{popup-item show='click' hide='click' itemName='popups/info'}}
</div>
To show a popup item on anchored to a particular side. Valid sides are n
, ne
, e
, se
, s
, sw
, w
, nw
.
<div>
Click for more information
{{popup-item show='click' hide='click' itemName='popups/info' side='e'}}
</div>
Or to attach the popup item to another element on the page specify a target element.
<div id="info">Click for more information</div>
{{popup-item show='click' hide='click' itemName='popups/info' side='e' target="#info"}}
To style the popup area and the popup item itself, follow the css styling code below.
popup-item {
opacity:0;
@include box-shadow(0 0 15px rgba(0,0,0,0.6));
}
popup-item[visible] {
opacity:1;
@include box-shadow(0 0 15px rgba(0,0,0,0.6));
@include animation(ghost 0.3s ease-in-out 0.2s normal both);
}
Development
make install
(install bower and ember-cli dependencies)make upgrade
(upgrade ember-cli to the specified version)make tests
(run all tests defined in the package)