Merge pull request #290 from sir-dunxalot/text-and-title-clash

Prevent tooltip from adding target element's title attribute to tooltip - fixes #224

addon/components/ember-tooltip-base.js

@@ -317,6 +317,11 @@ export default Component.extend({
           const rootElement = document.querySelector(config.APP.rootElement);
           const target = this.get('target');
           const tooltipClassName = this.get('tooltipClassName');
+
+          const targetTitle = target.title;
+
+          target.removeAttribute('title');
+
           const tooltip = new Tooltip(target, {
             container: rootElement || false,
             html: true,
@@ -353,6 +358,8 @@ export default Component.extend({
                     popperInstance.update();
                   });
 
+                  target.setAttribute('title', targetTitle);
+
                   resolve(tooltipData);
                 });
               },

tests/integration/components/title-test.js

@@ -0,0 +1,49 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, triggerEvent } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import {
+  assertTooltipContent,
+  assertTooltipNotVisible,
+  assertTooltipVisible,
+  findTooltipTarget,
+} from 'ember-tooltips/test-support';
+
+module('Integration | Component | title', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test(`ember-tooltip uses text instead of parent's title attribute`, async function(assert) {
+    assert.expect(5);
+
+    await render(hbs`
+      <div title="Hover for more info">
+        {{ember-tooltip text='Here is more info'}}
+      </div>
+    `);
+
+    const [ target ] = findTooltipTarget();
+
+    await triggerEvent(target, 'mouseenter');
+
+    assertTooltipVisible(assert);
+
+    assertTooltipContent(assert, {
+      contentString: 'Here is more info',
+    });
+
+    /* Reshow the tooltip and check it's content is still correct */
+
+    await triggerEvent(target, 'mouseleave');
+
+    assertTooltipNotVisible(assert);
+
+    await triggerEvent(target, 'mouseenter');
+
+    assertTooltipContent(assert, {
+      contentString: 'Here is more info',
+    });
+
+    assert.equal(target.title, 'Hover for more info',
+      'The target should have the original title');
+  });
+});