esc keydown only firing once per press

addon/components/ember-tooltip-base.js

@@ -278,6 +278,8 @@ export default Component.extend({
     }
 
     this._addEventListener('keydown', (keyEvent) => {
+      keyEvent.stopImmediatePropagation(); /* So this callback only fires once per keydown */
+
       if (keyEvent.which === 27) {
         this.hide();
 
@@ -460,13 +462,12 @@ export default Component.extend({
   },
 
   _hideTooltip() {
+    const _tooltip = this.get('_tooltip');
 
-    if (this.get('isDestroying')) {
+    if (!_tooltip || this.get('isDestroying')) {
       return;
     }
 
-    const _tooltip = this.get('_tooltip');
-
     _tooltip.popperInstance.popper.classList.remove(ANIMATION_CLASS);
 
     run.later(() => {
@@ -477,6 +478,7 @@ export default Component.extend({
 
       _tooltip.hide();
 
+      this.set('_isHiding', false);
       this.set('isShown', false);
       this.sendAction('onHide', this);
     }, this.get('_animationDuration'));

addon/styles/_mixins.scss

@@ -7,24 +7,21 @@
   }
 
   &[x-placement^="#{$side}"] {
-    // margin-#{$opposite}: 0;
-
-    // &.ember-tooltip-effect-slide {
-    //   margin-#{$side}: $tooltipSlideDistance;
-    // }
-
-    // &.ember-tooltip-effect-slide.ember-tooltip-show {
-    //   margin-#{$opposite}: 0;
-    // }
-
     .ember-tooltip-arrow {
       border-#{$opposite}-width: 0;
-      border-#{$side}-color: $tooltipBackgroundColor; /* TODO - make work for popovers */
       #{$opposite}: -$_tooltipArrowSize;
       #{$from}: calc(50% - $_tooltipArrowSize); // If vert, left, else top
       margin-#{$side}: 0;
       margin-#{$opposite}: 0;
     }
+
+    &.ember-tooltip .ember-tooltip-arrow {
+      border-#{$side}-color: $tooltipBackgroundColor;
+    }
+
+    &.ember-popover .ember-tooltip-arrow {
+      border-#{$side}-color: $popoverBackgroundColor;
+    }
   }
 }
 

addon/styles/addon.scss

@@ -1,5 +1,5 @@
 $tooltipBackgroundColor: #3a3c47;
-$tooltipTransitionDuration: 200ms;
+$popoverBackgroundColor: #fff;
 $tooltipSlideDistance: 10px;
 
 $_tooltipArrowSize: 5px; /* If you change this, position breaks */
@@ -40,7 +40,7 @@ $_tooltipArrowSize: 5px; /* If you change this, position breaks */
 
 .ember-popover {
   color: #000;
-  background-color: #fff;
+  background-color: $popoverBackgroundColor;
   padding: 10px 20px;
   border: 1px solid #ccc;
 
@@ -73,10 +73,9 @@ $_tooltipArrowSize: 5px; /* If you change this, position breaks */
 .ember-tooltip,
 .ember-popover {
   opacity: 0;
-  -webkit-transition: opacity #{$tooltipTransitionDuration} ease-out,
-                      margin #{$tooltipTransitionDuration} ease-out;
-  transition: opacity #{$tooltipTransitionDuration} ease-out,
-              margin #{$tooltipTransitionDuration} ease-out;
+  -webkit-transition: opacity ease-out, margin ease-out;
+  transition: opacity ease-out, margin ease-out;
+  transition-duration: 200ms;
 
   &.ember-tooltip-effect-none,
   &.ember-tooltip-show {

tests/dummy/app/styles/app.scss

@@ -10,7 +10,6 @@ html {
 
 body {
   font-size: #{$bodyFontSize}rem;
-  background-color: #eee; /* TODO - remove */
 
   /* So text looks much better in Crome/Safari */
 

tests/dummy/app/templates/index.hbs

@@ -148,6 +148,10 @@
     background-color: #e37f7f;
     color: #fff;
   }
+
+  .tooltip-error .ember-tooltip-arrow {
+    display: none;
+  }
 </style>
 
 {{#some-component}}