tylerturdenpants / ember-attacher Goto Github PK

Just like in ember-popper. This can be done by making the component tagless and simply passing the class to the ember-popper instance.

I'm seeing an issue with a visible popover/tooltip positioning.

When the browser is resized sharply/quickly, the popover/tooltip isn't repositioned correctly.

Bug

1. Go to https://kybishop.github.io/ember-attacher/
2. Using developer tools, set tooltip text from Hello World! to Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text.
3. Activate tooltip -> Tooltip background color is transparent when the tooltip's text is long.

Workaround

Remove background-color: transparent.

&.ember-attacher-fill {
    overflow: hidden;
    // background-color: transparent;
}

Is there a reason why ember-attacher-fill class has a transparent background color?

I got this warning in ember cli console

WARNING: ember-decorators (used in ember-popper): You have not installed @ember-decorators/babel-transforms. It has been extracted to a separate addon. See instructions for installation: https://github.com/ember-decorators/babel-transforms#readme

installation of ember-decorators according to warning did not help.

The clickout listener evaluates whether or not the click event's target is contained within the attachment's target, or the attachment itself when interactive=true.

This is borked when there is an attachment within the attachment, since that attachment will have been moved to the body.

Need to find a clever way to determine if a nested attachment is actually a child of another attachment.

Using interactive: true, when a browser loses focus by changing different applications and a target has focus, the open tooltip/popover doesn't close via mouseleave or mousemove.

Reproduce:
Cause the browser to lose focus by changing applications via keyboard shortcuts.

Position the mouse over another tooltip.

Change applications back to the browser via keyboard shortcuts.

Move the mouse and the tooltip/popover over a different target will appear while the focused target's tooltip/popover remains visible.

Expected: Mouseleave on a focused event should hide the tooltip/popover, but does not.
Mouseleave on previously focused event, after mouseenter, should hide the tooltip/popover, which does not.

More stars should help ember-attacher grow in popularity, fostering a larger community of contributors. To that end, I'd like to make it as easy as possible to star the project 😃

If I use showOn='click' and hideOn='click', then passing isShown=false will not force it to close, however, if I set showOn='none' and hideOn='none' and try to use isShown it does toggle visibility, but then it is rendered in the wrong location, not tied to its parent.

Bug
ember-attacher fails to run under fastboot with the following errors:

There was an error running your app in fastboot. More info about the error: 
 ReferenceError: document is not defined
    at Module.callback (/home/swerner/development/ember-attacher/tmp/broccoli_merge_trees-output_path-3Bu8LoXQ.tmp/assets/addon-tree-output/ember-attacher/components/ember-attacher.js:20:1)

There was an error running your app in fastboot. More info about the error: 
 Error: Accessing `this.element` is not allowed in non-interactive environments (such as FastBoot).
    at InertRenderer.getElement (/home/swerner/development/ember-attacher/tmp/broccoli_merge_trees-output_path-LqT88ym5.tmp/assets/vendor/ember/ember.debug.js:14386:1)
    at Class.get (/home/swerner/development/ember-attacher/tmp/broccoli_merge_trees-output_path-LqT88ym5.tmp/assets/vendor/ember/ember.debug.js:43743:1)
    at Class.<anonymous> (/home/swerner/development/ember-attacher/tmp/broccoli_merge_trees-output_path-LqT88ym5.tmp/assets/addon-tree-output/ember-attacher/components/ember-attacher.js:66:1)

Related to FastBoot support: ReferenceError: navigator is not defined #14.

Instructions

1. yarn upgrade [email protected]
2. yarn add ember-cli-fastboot --dev
3. ember server

Triggering the hide action does hide the tooltip/popover but the following mouseleave does not hide the tooltip.

Will need to investigate why, but the animation is very weird when using isShown

I'm getting this warning when running ember s:

Warning: ignoring input sourcemap for vendor/popper.js/popper.js because ENOENT: 
no such file or directory, open ' <...> /tmp/source_map_concat-input_base_path-YBKBBjEI.tmp/vendor/popper.js/popper.js.map'

Steps to reproduce:

• ember new my-project
• cd my-project
• ember install ember-attacher
• ember s

On the demo site there is an offset between the tooltip and the target:

But when I tried to implement the tooltip I never get this offset:

So I think some documentation is missing here at least. Any help about this?
I've realized there is an undocumented isOffset feature in the code. Also the corresponding test uses margin-bottom, which works, but breaks when the popper flips. What is the recommended way to do this, and can this please be documented somewhere?

This is even a problem with lazy rendering enabled. I believe the issue is that we aren't lazy enough. Will have to see about pushing lazy-rendering and visibility toggling down a layer into ember-popper.

It's quite possible a separate and/or custom impl of ember-popper is needed for tooltip libraries; ember-popper might already be too far down the road of supporting popovers alone for people to accept the burden of adding hide/show logic to the addon.

I'd like to publish v1.0.0 once we go 2 months without a breaking change or major concern. In addition, all issues marked v1.0.0 must be resolved before v1.0.0 is published.

If anyone has feedback, comments, concerns, or questions for v1.0.0, please share!

We will follow strict semver once we go to v1.0.0. We are currently considering 0.X changes breaking; after v1.0.0, all breaking changes will come with a major version bump.

For some (to me) unknown reason ember-attacher seems to have a dependency on babel-eslint. I assume it is due to the use of ember-decorators, but it still should not be a prod- and instead a dev-dependency 🤔

Sorry but twiddle seems not to work.

What?
https://github.com/poteto/ember-metrics cannot load config if any attach-component is present.

How?

• Install latest version of https://github.com/poteto/ember-metrics and ember-attacher
• Configure GoogleAnalytics in environment
• Add an attach-tooltip on page

Uncaught TypeError: Cannot read property 'id' of null
    at Class.init (google-analytics.js:23)
    at new Class (core_object.js:113)
    at Function._ClassMixinProps.create [as _super] (core_object.js:282)
    at Function.create (validation-decorator.js:41)
    at Function.superWrapper [as create] (ember-utils.js:437)
    at Class._activateAdapter (metrics.js:247)
    at metrics.js:174
    at Array.forEach (<anonymous>)
    at Class.activateAdapters (metrics.js:171)
    at Class.init (metrics.js:119)

Should the aria-describedby attribute be ember-attacher's responsibility to add to the target?

sigh This is because we're placing the popper in the top left to avoid initial positioning errors that would place the popper outside of the screen. The issue was hidden from me because I've always been using animations, which typically keep the popper invisible to the human eye until it has already been positioned appropriately.

I have a workaround in mind that uses visibility: hidden until the popper's first correct placement.

Temporary workaround: use the fade animation with a super short showDuration... just long enough to hide it for that initial flicker.

According to https://www.w3.org/TR/wai-aria-practices/#tooltip, how would you advise closing the tooltip on ESC key press?

I have no idea why this would be happening, but after installing the addon, my builds are failing.

Here's the terminal output

web> ember install ember-attacher
Yarn: Installed ember-attacher
Installed addon package.
web> ember deploy staging --activate=true
ember-cli-sentry will not be loaded from bower installation
cleaning up...
- build failed
Error: The Broccoli Plugin: [Fingerprint] failed with:
TypeError: Cannot read property '2' of null
    at AssetRewrite.rewriteAssetPath (/Users/Jeff1/cf_repos/web/node_modules/broccoli-asset-rewrite/index.js:127:91)
    at AssetRewrite.processString (/Users/Jeff1/cf_repos/web/node_modules/broccoli-asset-rewrite/index.js:167:24)
    at AssetRewrite.processFile (/Users/Jeff1/cf_repos/web/node_modules/broccoli-filter/index.js:165:31)
    at asyncProcessFile (/Users/Jeff1/cf_repos/web/node_modules/broccoli-filter/index.js:122:21)
    at tryCatch (/Users/Jeff1/cf_repos/web/node_modules/rsvp/dist/rsvp.js:525:12)
    at invokeCallback (/Users/Jeff1/cf_repos/web/node_modules/rsvp/dist/rsvp.js:538:13)
    at /Users/Jeff1/cf_repos/web/node_modules/rsvp/dist/rsvp.js:606:14
    at flush (/Users/Jeff1/cf_repos/web/node_modules/rsvp/dist/rsvp.js:2415:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickDomainCallback (internal/process/next_tick.js:122:9)

The broccoli plugin was instantiated at:
    at Fingerprint.Plugin (/Users/Jeff1/cf_repos/web/node_modules/broccoli-plugin/index.js:7:31)
    at Fingerprint.Filter [as constructor] (/Users/Jeff1/cf_repos/web/node_modules/broccoli-filter/index.js:34:10)
    at new Fingerprint (/Users/Jeff1/cf_repos/web/node_modules/broccoli-asset-rev/lib/fingerprint.js:21:10)
    at Fingerprint (/Users/Jeff1/cf_repos/web/node_modules/broccoli-asset-rev/lib/fingerprint.js:16:12)
    at new AssetRev (/Users/Jeff1/cf_repos/web/node_modules/broccoli-asset-rev/lib/asset-rev.js:37:26)
    at AssetRev (/Users/Jeff1/cf_repos/web/node_modules/broccoli-asset-rev/lib/asset-rev.js:7:12)
    at Class.postprocessTree (/Users/Jeff1/cf_repos/web/node_modules/broccoli-asset-rev/index.js:31:40)
    at projectOrAddon.addons.reduce (/Users/Jeff1/cf_repos/web/node_modules/ember-cli/lib/utilities/addon-process-tree.js:6:25)
    at Array.reduce (native)
    at addonProcessTree (/Users/Jeff1/cf_repos/web/node_modules/ember-cli/lib/utilities/addon-process-tree.js:4:32)
    at EmberApp.addonPostprocessTree (/Users/Jeff1/cf_repos/web/node_modules/ember-cli/lib/broccoli/ember-app.js:661:12)
    at EmberApp.toTree (/Users/Jeff1/cf_repos/web/node_modules/ember-cli/lib/broccoli/ember-app.js:1814:17)
    at module.exports (/Users/Jeff1/cf_repos/web/ember-cli-build.js:76:14)
    at Builder.setupBroccoliBuilder (/Users/Jeff1/cf_repos/web/node_modules/ember-cli/lib/models/builder.js:56:19)
    at new Builder (/Users/Jeff1/cf_repos/web/node_modules/ember-cli/lib/models/builder.js:30:10)
    at CoreObject.build (/Users/Jeff1/cf_repos/web/node_modules/ember-cli-deploy-build/index.js:33:23)
    at Object.fn (/Users/Jeff1/cf_repos/web/node_modules/ember-cli-deploy/lib/tasks/pipeline.js:93:21)
    at Pipeline._notifyPipelinePluginHookExecution (/Users/Jeff1/cf_repos/web/node_modules/ember-cli-deploy/lib/models/pipeline.js:173:19)
    at tryCatch (/Users/Jeff1/cf_repos/web/node_modules/rsvp/dist/rsvp.js:525:12)
    at invokeCallback (/Users/Jeff1/cf_repos/web/node_modules/rsvp/dist/rsvp.js:538:13)
    at /Users/Jeff1/cf_repos/web/node_modules/rsvp/dist/rsvp.js:606:14
    at flush (/Users/Jeff1/cf_repos/web/node_modules/rsvp/dist/rsvp.js:2415:5)

Pipeline aborted
web>

I'm working on a project with ember 2.10 that have a dependency with ember-cli-babel 5.x, right now in development has running fine, but the test is totally broken:

⠋ BuildingCannot read property 'babel' of undefined
TypeError: Cannot read property 'babel' of undefined
    at Class._setupBabelOptions (...node_modules/ember-attacher/index.js:36:40)
    at Class.included (..../node_modules/ember-attacher/index.js:16:10)

is possible to add compatibility for babel 5?

If your app sets a custom rootElement in app.js, calling actions within ember-attacher content block doesn't work.

Simplified reproduction scenario:

app.js:

...
  App = Application.extend({
    modulePrefix: config.modulePrefix,
    podModulePrefix: config.podModulePrefix,
    rootElement: '#my-app-root',
    Resolver
  });
...

index.html

...
  <body>
    {{content-for "body"}}

    <div id="my-app-root"></div>

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/my-app-test.js"></script>

    {{content-for "body-footer"}}
  </body>
...

application.hbs

<button>
Click!
{{#ember-attacher as |emberAttacher|}}
Hello!
<button {{action "customAction"}}>Wave</button>
<button {{action emberAttacher.hide}}>Close</button>
{{/ember-attacher}}
</button>

Both buttons "Wave" and "Close" do not work, if a rootElement was set in app.js.

In attach-popover.js file there's a _initializeAttacher method triggered on insert and by an observer on 'hideOn', 'showOn', 'popperTarget' properties.

In the hbs file where the attach-popover is declared if you pass a "#myId" string to the popperTarget attribute, then in the _initializeAttacher this property is set like this:

this._currentTarget = this.get('popperTarget')

but because the popperTarget is a string, then the _currentTarget is no longer a DOM element, so when we run the:

this._currentTarget.addEventListener(event, this._showAfterDelay)

an error is raised because this._currentTarget has no addEventListener ( of course, it is just a string :)

I came to some workaround and passed a DOM element to the popperTarget in the hbs file, but I think it would be better to do as in your ember-popper add-on and check if the this.get('popperTarget') is an instance of Element (cf. the _getPopperTarget method in the ember-popper-base.js file)

If you want, and think it worths it, I would be pleased to send you a pull request for this issue.

v0.12.0 currently broken on dev-mode because of ember-decorators/argument#24

ember s -prod should still work in consuming apps.

The ember-attacher-inner template calls an eq helper, this results in the error "Error: Compile Error: eq is not a helper" on a plain ember-cli project.

Adding "ember-truth-helpers" as project dependency resolved the issue.

Stack

ember-cli: 2.12.1
node: 4.7.2
os: linux x64

Steps to reproduce

$> ember new myapp
$> cd myapp
$> ember install ember-attacher@^0.13.0
Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Function.addonProto._requireBuildPackages.transpileModules.pickFiles.initializeAddons.eachAddonInvoke._eachProjectAddonInvoke.args._fileSystemInfo.addonProto.(anonymous function).Addon.lookup (/tmp/todo/myapp/node_modules/ember-cli/lib/models/addon.js:1593:19)
    at /tmp/todo/myapp/node_modules/ember-cli/lib/models/addons-factory.js:54:38
    at visit (/tmp/todo/myapp/node_modules/ember-cli/lib/utilities/DAG.js:23:3)

From what I've found
This is most likely due to [email protected] and Block-scoped declarations
BUT
2 days ago we had ember-attacher working alright.

Hypothesis

1. Some (sub)dependencies of ember-attacher have permissive (^ or ~) and my problem is caused because some nested / nested / nested / nested dependencies have changed and now have non-compliant Block-scoped declarations

Potential solutions

1. Update nodejs
2. Look for the incriminated dependency(ies)
3. Something else???

What do you think? :)

Hi!

I'm new to Ember, so please forgive if this is an obvious question.

But is there a recommended way to render a page overlay when showing the dialog? I've put together my own solution (below), but because the overlay is contained within my button-with-dialog component, ember-attacher seems to treat the overlay as part of the popper-trigger, this results in:

• overlay is shown when dialog is triggered - correct
• overlay is hidden when dialog is hidden (e.g hideOn='clickOut') - correct
• dialog/overlay are not hidden when clicking on the overlay

<button>
    {{{button-label}}}

    {{#attach-popover
        class="ember-attacher-popper c-dialog c-dialog__panel"
        hideOn='clickout'
        isShown=false
        onChange=(action (mut isShown))
        placement="bottom"
        showOn='click'
        flip='bottom top'
        lazyRender=true
    }}
        {{yield}}
    {{/attach-popover}}
</button>

{{#if isShown}}
    <div class="c-page__dialog-overlay" {{action (mut isShown)}}></div>
{{/if}}

According to https://github.com/kybishop/ember-attacher/blob/master/addon/components/ember-attacher-inner.js#L279, a mouseleave triggers the _hideOnMouseLeaveTarget method. If interactive is true, then _hideOnMouseLeaveTarget will just keep adding the mousemove event to the document object.

If you pass an undefined hideOn or showOn, we should probably grab the defaults instead of using undefined. Right now it blows up on trying to do .split.

This results in this error:

Cannot set property arrow of [object Object] which has only a getter

The problem is that here this[key] is a proxy with no setter.

Fairly confident this is a performance bug in Ember itself. Will do a detailed analysis with some flame-graph screenshots to see if I can narrow things down at all.

ember -v
ember-cli: 3.1.0-beta.1
node: 9.8.0
os: darwin x64

Hi, I've just installed the addon to try it out, I'm using the example popover code:

<button class="other-button">
  No click me!

  {{#attach-popover class="ember-attacher-popper"
                    hideOn='click'
                    isShown=true
                    showOn='click'}}
    I'm a popover!
  {{/attach-popover}}
</button>

And I receive this error in console:

jQuery.Deferred exception: setting getter-only property "eventsEnabled" defineProperty@http://localhost:4200/assets/vendor.js:35400:9
Class@http://localhost:4200/assets/vendor.js:50021:18
EmberPopperBase@http://localhost:4200/assets/vendor.js:79198:28
EmberPopper@http://localhost:4200/assets/vendor.js:829:19
_ClassMixinProps.create@http://localhost:4200/assets/vendor.js:50191:14
superWrapper@http://localhost:4200/assets/vendor.js:54782:17
create@http://localhost:4200/assets/vendor.js:72792:24
superWrapper@http://localhost:4200/assets/vendor.js:54782:17
create@http://localhost:4200/assets/vendor.js:72988:38
superWrapper@http://localhost:4200/assets/vendor.js:54782:17
create@http://localhost:4200/assets/vendor.js:21437:22
create@http://localhost:4200/assets/vendor.js:29939:29
@http://localhost:4200/assets/vendor.js:16020:21
evaluate@http://localhost:4200/assets/vendor.js:14419:17
evaluateSyscall@http://localhost:4200/assets/vendor.js:17624:13
evaluateInner@http://localhost:4200/assets/vendor.js:17600:17
evaluateOuter@http://localhost:4200/assets/vendor.js:17592:17
next@http://localhost:4200/assets/vendor.js:19175:17
next@http://localhost:4200/assets/vendor.js:19256:20
RootState/this.render@http://localhost:4200/assets/vendor.js:30315:38
runInTransaction@http://localhost:4200/assets/vendor.js:34658:11
_renderRoots@http://localhost:4200/assets/vendor.js:30581:63
_renderRootsTransaction@http://localhost:4200/assets/vendor.js:30613:17
_renderRoot@http://localhost:4200/assets/vendor.js:30546:13
_appendDefinition@http://localhost:4200/assets/vendor.js:30471:13
appendOutletView@http://localhost:4200/assets/vendor.js:30459:13
invoke@http://localhost:4200/assets/vendor.js:20325:17
flush@http://localhost:4200/assets/vendor.js:20243:25
flush@http://localhost:4200/assets/vendor.js:20396:25
end@http://localhost:4200/assets/vendor.js:20528:26
_run@http://localhost:4200/assets/vendor.js:20878:21
_join@http://localhost:4200/assets/vendor.js:20854:24
join@http://localhost:4200/assets/vendor.js:20595:20
run.join@http://localhost:4200/assets/vendor.js:33883:12
run.bind/<@http://localhost:4200/assets/vendor.js:33958:14
mightThrow@http://localhost:4200/assets/vendor.js:3873:21
resolve/</process<@http://localhost:4200/assets/vendor.js:3941:12

Can instructions be added to the README on how to test usage of this addon?

Test helpers would also be useful.

Ideally we determine all the default values at build time

Would be nice, to have a way to reuse/share tooltips.

Simplified use case example of a list with several items, each with a delete icon button having a "Delete" tooltip:

<div class="list">
{{#each items as |item|}}
  <div class="item">
    {{item.name}}
    <div class="icon-delete" {{action "delete" item}}>
      {{#ember-attacher}}Delete{{/ember-attacher}}
    </div>
  </div>
{{/each}}
</div>

At the moment, this would create a distinct tooltip for each item. Ends up having a lot of "duplicate" tooltip elements.

If there would be a way to declare a tooltip beforehand and then just bind it to several elements, one could eliminate a lot of these "duplicate" tooltip elements.

{{!-- create a shareable tooltip, not bound to anything yet --}}
{{#ember-attacher set="delete-tooltip"}}Delete{{/ember-attacher}}

<div class="list">
{{#each items as |item|}}
  <div class="item">
    {{item.name}}
    <div class="icon-delete" {{action "delete" item}}>
      {{ember-attacher get="delete-tooltip"}} {{!-- bind the shared tooltip --}}
    </div>
  </div>
{{/each}}
</div>

Basically because this isn't transpiled for some reason:

https://github.com/kybishop/ember-attacher/blob/a2f1cd0850c4afc6b371cf121ff35138e4c0eca3/addon/-debug/helpers.js#L11

This is a common enough behavior that we should implement a custom hide event for clicking outside the target. When interactive=true, the attachment should only be hidden when clicking outside both target and attachment.

After upgrading from 0.11.4 to any higher version (including 0.13.1), if get the following error:

Uncaught Error: Could not find module `@ember/component` imported from `@ember-decorators/argument/-debug/validated-component`
at missingModule (loader.js:247)
at findModule (loader.js:258)
at Module.findDeps (loader.js:168)
at findModule (loader.js:262)
at Module.findDeps (loader.js:168)
at findModule (loader.js:262)
at Module.findDeps (loader.js:168)
at findModule (loader.js:262)
at Module.findDeps (loader.js:168)
at findModule (loader.js:262)

There are no other problems/execptions besides the module error (only some caught ones from babel-polyfill).

Deleting node_modules for a fresh dependencies installation didn't changed anything. It also happens in both, production and delevopment build.

I wasn't yet able to reproduce the problem in a fresh ember-cli project.

Any ideas how to get more information what is going wrong here?

I've already asked this at stackoverflow, but didn't got help yet. So i decided to try to ask here on the project directly, as i can't tag the question on stackoverflow with ember-attacher or ember-popper.

Feel free to delete this issue, if it's inappropriate here.

My projects dependencies:

"devDependencies": {
    "broccoli-asset-rev": "^2.6.0",
    "ember-ajax": "^3.0.0",
    "ember-attacher": "^0.11.4",
    "ember-chrome-devtools": "^0.2.0",
    "ember-cli": "~2.18.2",
    "ember-cli-app-version": "^3.1.3",
    "ember-cli-autoprefixer": "^0.8.1",
    "ember-cli-babel": "^6.11.0",
    "ember-cli-dependency-checker": "^2.1.0",
    "ember-cli-eslint": "^4.2.3",
    "ember-cli-htmlbars": "^2.0.3",
    "ember-cli-htmlbars-inline-precompile": "^1.0.2",
    "ember-cli-inject-live-reload": "^1.7.0",
    "ember-cli-moment-shim": "^3.5.0",
    "ember-cli-qunit": "^4.3.1",
    "ember-cli-sass": "^7.1.4",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-string-helpers": "1.7.0",
    "ember-cli-uglify": "^2.0.0",
    "ember-cli-windows-addon": "^1.3.1",
    "ember-cli-yuidoc": "^0.8.8",
    "ember-collection": "^1.0.0-alpha.7",
    "ember-composable-helpers": "^2.1.0",
    "ember-cp-validations": "^3.5.1",
    "ember-crumbly": "^2.0.0-alpha.1",
    "ember-data": "~2.18.1",
    "ember-debounced-properties": "0.0.5",
    "ember-drag-drop": "^0.4.7",
    "ember-export-application-global": "^2.0.0",
    "ember-intl": "^2.32.1",
    "ember-intl-cp-validations": "^3.0.1",
    "ember-load": "^0.0.12",
    "ember-load-initializers": "^1.0.0",
    "ember-math-helpers": "^2.4.0",
    "ember-md5": "^1.1.0",
    "ember-moment": "^7.6.0",
    "ember-paper": "~1.0.0-beta.4",
    "ember-pikaday": "^2.2.4",
    "ember-pouch": "^5.0.0",
    "ember-promise-helpers": "^1.0.3",
    "ember-radio-button": "^1.2.2",
    "ember-resolver": "^4.0.0",
    "ember-responsive": "^2.0.5",
    "ember-route-action-helper": "^2.0.6",
    "ember-shepherd": "^3.1.0",
    "ember-simple-auth": "^1.5.0",
    "ember-source": "~2.18.0",
    "ember-tether": "^1.0.0-beta.1",
    "ember-timepicker": "^0.2.0",
    "ember-transition-helper": "^0.0.6",
    "ember-truth-helpers": "^2.0.0",
    "ember-user-activity": "^0.10.0",
    "ember-uuid": "^1.0.0",
    "eslint": "^4.17.0",
    "eslint-plugin-ember": "^5.0.3",
    "loader.js": "^4.2.3",
    "paper-time-picker": "^0.1.15",
    "string_score": "^0.1.22",
    "yuidoc-ember-theme": "^1.4.0"
  }

The default events for showOn are mouseenter and focus.

The default events for hideOn are mouseleave and blur.

The tests only demonstrate showOn and hideOn for click.

Would you accept a PR that replaces ember-cli-sass with ember-css-module / postcss? 🙂

The css files would stay almost the same, I'd only have to swap some keywords here and there.

I would like to get rid of the transient binary dependency in our projects.

Generic CSS selectors like .tooltip conflicts with libs like foundation-sites.

Would it make sense to name them more specific to this addon or make all the CSS a mixin?

We should test all public facing features of the API. Below is a non-comprehensive list that will be updated over time.

• Common showOn events
  • click
  • mouseenter
  • focusin
• All hideOn events
  • click
  • clickout
  • escapekey
  • focusout
  • blur
  • mouseleave
• All hideOn events where interactive=true has special behavior
  • clickout
  • focusout
  • blur
  • mouseleave
• onChange hook
• {{attach-tooltip}}

Other tasks

• Update README.md with examples
• Add test helpers like ember-tooltips

Repeat Bug
$ ember install ember-attacher

Workaround
$ yarn add --dev ember-attacher

$ ember install ember-attacher
NPM: Installed ember-attacher
installing ember-attacher
  install addon kybishop/ember-popper@^0.0.3
Command failed: npm install --save-dev --loglevel error kybishop/ember-popper@^0.0.3
npm ERR! addLocal Could not install /home/swerner/development/startup/frontend/kybishop/ember-popper@^0.0.3
npm ERR! path /home/swerner/development/startup/frontend/kybishop/ember-popper@^0.0.3
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/home/swerner/development/startup/frontend/kybishop/ember-popper@^0.0.3'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/swerner/.npm/_logs/2017-05-15T16_26_41_999Z-debug.log

Error: Command failed: npm install --save-dev --loglevel error kybishop/ember-popper@^0.0.3
npm ERR! addLocal Could not install /home/swerner/development/startup/frontend/kybishop/ember-popper@^0.0.3
npm ERR! path /home/swerner/development/startup/frontend/kybishop/ember-popper@^0.0.3
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/home/swerner/development/startup/frontend/kybishop/ember-popper@^0.0.3'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/swerner/.npm/_logs/2017-05-15T16_26_41_999Z-debug.log

    at Promise.all.then.arr (/home/swerner/development/startup/frontend/node_modules/execa/index.js:210:11)
    at process._tickCallback (internal/process/next_tick.js:109:7)

npm: 4.5.0
ember-source: 2.13.0

2017-05-15T16_26_41_999Z-debug.txt

Getting the following error on page load with this plugin:

"Assertion Failed: Attempted to assign 'popperTarget' value on a (unknown mixin) component, but no argument was defined for that key. Use the @argument helper on the class field to define an argument which can be passed into the component"

I've attempted to simplify my usage to just be

Hello
{{#attach-popover}}
  Hello
{{/attach-popover}}

and the issue is still happening.

My initial usage was more complex:

{{yield}}
{{#attach-popover
  arrow=true
  interactive=true
  onChange=onShow
  placement='left'
}}
  Other Fun Templating code here
{{/attach-popover}}

Right now, in ember-attacher the tooltips are all pre-rendered and in the dom. For my use case, we are putting allot of complex content (lists, menus, inputs, etc) in the popovers.

If this is added, it could indirectly resolve #64

Ember-tooltips supports this right now: https://github.com/sir-dunxalot/ember-tooltips#enable-lazy-rendering

But I like ember-attacher better because I do not want or need to override styling when using the {{#ember-attacher.

What say you? I do not mind putting in some work and PR'ing it, but don't want to start without buy in.

In my app, i had issues with tooltips gettign trapped within their parents boundaries. I got it fixed by setting modifiers.preventOverflow.boundariesElement: 'viewport'.

I've then added this to config/environment.js, to not have to give it on every tooltip component use:

emberAttacher: {
  modifiers: {
    preventOverflow: {
      boundariesElement:  'viewport'
    }
  }
}

With this, an Unknown property given as an ember-attacher default: modifiers warning comes up for every tooltip initialization.

Is their any harm or risk by setting the modifiers in environment.js? Can we savely add it as modifiers: null to the known/allowed default settings overrides in ember-attachers defaults.js, to get rid of the warning?

For better composability

Seems like there's an issue with [email protected]. I can't reproduce it on 0.3.1. I went ahead and created an issue on that repo: ember-cli/babel-plugin-filter-imports#19

Might be worth checking out. Thanks