Add targetElement argument

Add a `targetElement` argument that's similar to `targetId`, but can specify an HTML element for cases where the target element doesn't have an ID, e.g. HTML rendered by a third-party library.

README.md

@@ -72,6 +72,15 @@ The tooltip will always be rendered on its parent element unless you specify the
 </EmberTooltip>
 ```
 
+or the `targetElement` attribute:
+
+```hbs
+<EmberTooltip @targetElement={{this.tooltipTargetElement}}>
+  Here is some more info
+</EmberTooltip>
+```
+
+
 Tooltips and popovers are lazy rendered. That means the are only rendered in the DOM once the user interacts with the [target element](#targetid).
 
 Options can be set on the `<EmberTooltip>` as attributes:
@@ -92,7 +101,7 @@ Documentation for supported options is located [here](#options).
 
 Popovers can be created with the `<EmberPopover />` component, which is added to apps just like `<EmberTooltip />`.
 
-Popovers support the same target behavior as tooltips; popovers will render on their parent element unless a `targetId` is supplied.
+Popovers support the same target behavior as tooltips; popovers will render on their parent element unless a `targetId` or `targetElement` is supplied.
 
 All the [options](#options) passed to tooltip components can be passed to popover components:
 
@@ -138,6 +147,7 @@ Options are set as attributes on the tooltip/popover components. Current tooltip
 - [showOn](#showon)
 - [spacing](#spacing)
 - [targetId](#targetid)
+- [targetElement](#targetelement)
 - [text](#text)
 - [tooltipClass](#tooltipclass)
 
@@ -493,6 +503,20 @@ For example, if you want to show a tooltip over a button when the user hovers ov
 </EmberTooltip>
 ```
 
+#### `targetElement`
+
+| Type    | Default                              |
+|---------|--------------------------------------|
+| Element | null (parent element of the tooltip) |
+
+This behaves the same as the [target](#target) attribute, except is used to specify the target element itself, rather than a selector for finding the target element. If both `targetElement` and `targetId` are specified, `targetId` will take precedence.
+
+```hbs
+<EmberTooltip @targetElement={{this.tooltipTargetElement}}>
+  Here is some more info
+</EmberTooltip>
+```
+
 #### `text`
 
 | Type    | Default |

addon/components/ember-tooltip-base.js

@@ -86,6 +86,7 @@ export default Component.extend({
   side: 'top',
   spacing: 10,
   targetId: null,
+  targetElement: null,
   layout,
   updateFor: null,
   popperOptions: null,
@@ -162,7 +163,7 @@ export default Component.extend({
   }),
 
   // eslint-disable-next-line ember/require-computed-property-dependencies
-  target: computed('targetId', function () {
+  target: computed('targetId', 'targetElement', function () {
     const targetId = this.get('targetId');
 
     let target;
@@ -176,7 +177,7 @@ export default Component.extend({
         });
       }
     } else {
-      target = this.element.parentNode;
+      target = this.get('targetElement') || this.element.parentNode;
     }
 
     return target;

tests/integration/components/target-test.js

@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, triggerEvent, find } from '@ember/test-helpers';
+import { render, triggerEvent, find, settled } from '@ember/test-helpers';
 import {
   findTooltip,
   findTooltipTarget,
@@ -10,7 +10,7 @@ import {
 module('Integration | Component | target', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('ember-tooltip target test', async function (assert) {
+  test('ember-tooltip targetId test', async function (assert) {
     assert.expect(4);
 
     await render(hbs`
@@ -50,4 +50,56 @@ module('Integration | Component | target', function (hooks) {
       `The tooltip ID should match the target's aria-describedby attribute`
     );
   });
+
+  test('ember-tooltip targetElement test', async function (assert) {
+    assert.expect(1);
+
+    this.set('showTooltip', false);
+
+    await render(hbs`
+      <div id="some-target"></div>
+      {{#if this.showTooltip}}
+        {{ember-tooltip targetElement=this.targetElement}}
+      {{/if}}
+    `);
+
+    const expectedTarget = find('#some-target');
+    this.set('targetElement', expectedTarget);
+
+    this.set('showTooltip', true);
+    await settled();
+
+    const target = findTooltipTarget();
+    assert.equal(
+      expectedTarget,
+      target,
+      'The element with ID equal to targetID should be the tooltip target'
+    );
+  });
+
+  test('ember-tooltip targetId takes precedence over targetElement', async function (assert) {
+    assert.expect(1);
+
+    this.set('showTooltip', false);
+
+    await render(hbs`
+      <div id="some-target"></div>
+      <div id="other-target"></div>
+      {{#if this.showTooltip}}
+        {{ember-tooltip targetId="some-target" targetElement=this.targetElement}}
+      {{/if}}
+    `);
+
+    this.set('targetElement', find('#other-target'));
+    this.set('showTooltip', true);
+    await settled();
+
+    const expectedTarget = find('#some-target');
+    const target = findTooltipTarget();
+    assert.equal(
+      expectedTarget,
+      target,
+      'The element with ID equal to targetID should be the tooltip target'
+    );
+  });
 });