allow custom class to be applied in paper-tooltip

miguelcobain · Aug 22, 2017 · db3b46c · db3b46c
1 parent 2ec21e0
commit db3b46c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 2 deletions.
diff --git a/addon/components/paper-tooltip.js b/addon/components/paper-tooltip.js
@@ -1,9 +1,11 @@
 import Ember from 'ember';
 import layout from '../templates/components/paper-tooltip';
 import $ from 'jquery';
+import getParent from 'ember-paper/utils/get-parent';
 const { Component, computed, testing, run, String: { htmlSafe } } = Ember;
 
 export default Component.extend({
+  tagName: '',
   layout,
 
   position: 'bottom',
@@ -45,7 +47,7 @@ export default Component.extend({
     if (attachTo) {
       return $(attachTo).get(0);
     } else {
-      return this.element.parentNode;
+      return getParent(this);
     }
   }),
 

diff --git a/addon/templates/components/paper-tooltip.hbs b/addon/templates/components/paper-tooltip.hbs
@@ -1,7 +1,7 @@
 {{#if renderTooltip}}
   {{#ember-wormhole to=destinationId}}
     <div class="md-panel-outer-wrapper md-panel-is-showing" style={{containerStyle}}>
-      {{#paper-tooltip-inner position=position anchorElement=anchorElement hide=hideTooltip}}
+      {{#paper-tooltip-inner class=class position=position anchorElement=anchorElement hide=hideTooltip}}
         {{yield}}
       {{/paper-tooltip-inner}}
     </div>

diff --git a/addon/utils/get-parent.js b/addon/utils/get-parent.js
@@ -0,0 +1,16 @@
+import Ember from 'ember';
+const { get, ViewUtils } = Ember;
+
+// taken from https://github.com/kaliber5/ember-bootstrap/blob/master/addon/utils/get-parent.js
+export default function getParent(view) {
+  if (get(view, 'tagName') === '') {
+    // Beware: use of private API! :(
+    if (ViewUtils && ViewUtils.getViewBounds) {
+      return ViewUtils.getViewBounds(view).parentElement;
+    } else {
+      return view._renderNode.contextualElement;
+    }
+  } else {
+    return get(view, 'element').parentNode;
+  }
+}
diff --git a/tests/integration/components/paper-tooltip-test.js b/tests/integration/components/paper-tooltip-test.js
@@ -107,3 +107,19 @@ test('renders on bottom by default', async function(assert) {
   });
 });
 
+test('custom class is applied on md-tooltip element', async function(assert) {
+
+  this.render(hbs`
+    {{#paper-button}}
+      button
+      {{#paper-tooltip class="my-tooltip"}}
+        tooltip
+      {{/paper-tooltip}}
+    {{/paper-button}}
+  `);
+
+  await triggerEvent('.md-button', 'mouseenter');
+
+  assert.ok(find('md-tooltip').classList.contains('my-tooltip'));
+});
+