Merge pull request #1062 from Patternslib/tooltip-keep-title

feat(pat tooltip): Keep the title attribute for source ajax and content.

Author: thet

src/pat/tooltip/index.html

@@ -141,6 +141,7 @@ <h4>source</h4>
                     <code>source: content</code> and <code>href="#"</code>. Click
                     the following link to show
                     <a class="pat-tooltip"
+                        title="This is the title attribute"
                        data-pat-tooltip="source: content">the same content in the link</a>
                     inside the tooltip.
                 </p>
@@ -150,20 +151,23 @@ <h4>source</h4>
                     show
                     <a href="#tooltip-source"
                        class="pat-tooltip"
+                        title="This is the title attribute"
                        data-pat-tooltip="source: ajax">the content of the element matching the given selector</a>
                     inside the tooltip.
                 </p>
                 <p>
                     <code>source: ajax</code>. Mouse over the following link to show
                     <a href="pattern-test-response.html#myTip"
                        class="pat-tooltip"
+                        title="This is the title attribute"
                        data-pat-tooltip="source: ajax; trigger: click">the content of pattern-test-response.html#myTip</a>
                     loaded by ajax inside the tooltip.
                 </p>
                 <p>
                     <code>source: ajax</code>. Click the following link to show
                     <a href="pattern-test-response.html#myTip"
                        class="pat-tooltip"
+                        title="This is the title attribute"
                        data-pat-tooltip="source: ajax; trigger: click">the content of pattern-test-response.html#myTip</a
                     >
                     loaded by ajax inside the tooltip.
@@ -173,6 +177,7 @@ <h4>source</h4>
                     <button
                         class="pat-tooltip"
                         type="button"
+                        title="This is the title attribute"
                         data-pat-tooltip="
                           source: ajax;
                           url: pattern-test-response.html#myTip;
@@ -189,6 +194,7 @@ <h4>ajax-data-type</h4>
                     tooltip with content in markdown
                     <a href="documentation.md#Display"
                        class="pat-tooltip"
+                        title="This is the title attribute"
                        data-pat-tooltip="source: ajax; ajax-data-type: markdown">on click</a>.
                 </p>
 

src/pat/tooltip/tooltip.js

@@ -91,8 +91,9 @@ export default Base.extend({
         Tippy.setDefaultProps(defaultProps);
         this.tippy = new Tippy(el, this.tippy_options);
 
-        if (el.getAttribute("title")) {
-            // Remove title attribute to disable browser's built-in tooltip feature
+        if (this.options.source === "title") {
+            // Remove ``title`` attribute when source is set to ``title`` to
+            // disable the browser's built-in tooltip feature
             el.removeAttribute("title");
         }
 

src/pat/tooltip/tooltip.test.js

@@ -1587,4 +1587,47 @@ this will be extracted.
             expect(parts.selector).toBeFalsy();
         });
     });
+
+    describe("10 - Strip the title attribute ...", () => {
+        it("... only if the tooltip has source-title", async () => {
+            document.body.innerHTML = `
+                <a class="pat-tooltip"
+                    data-pat-tooltip="source: title"
+                    title="This is the title attribute"
+                >test</a>
+            `;
+            new pattern(document.querySelector(".pat-tooltip"));
+            await utils.timeout(1);
+
+            expect(document.querySelector(".pat-tooltip").title).toBeFalsy();
+        });
+        it("... not for source-content", async () => {
+            document.body.innerHTML = `
+                <a class="pat-tooltip"
+                    data-pat-tooltip="source: content"
+                    title="This is the title attribute"
+                >test</a>
+            `;
+            new pattern(document.querySelector(".pat-tooltip"));
+            await utils.timeout(1);
+
+            expect(document.querySelector(".pat-tooltip").title).toBe(
+                "This is the title attribute"
+            );
+        });
+        it("... not for source-ajax", async () => {
+            document.body.innerHTML = `
+                <a class="pat-tooltip"
+                    data-pat-tooltip="source: ajax"
+                    title="This is the title attribute"
+                >test</a>
+            `;
+            new pattern(document.querySelector(".pat-tooltip"));
+            await utils.timeout(1);
+
+            expect(document.querySelector(".pat-tooltip").title).toBe(
+                "This is the title attribute"
+            );
+        });
+    });
 });