@aquera/nile-elements 1.2.8-beta-1.8 → 1.2.8-beta-1.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.2.8-beta-1.8",
+  "version": "1.2.8-beta-1.9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-lite-tooltip/nile-lite-tooltip.ts

@@ -186,52 +186,79 @@ export class NileliteTooltip extends NileElement {
         return undefined;
       },
     };
-  
-    let targets: HTMLElement[] = [];
-  
     if (this.for) {
-      const selector = this.for.trim();
-      try {
-        targets = Array.from(document.querySelectorAll(selector));
-      } catch {
-        targets = Array.from(document.querySelectorAll(`.${this.for}`));
-      }
-  
-      if (targets.length > 0) {
-
-        this.tooltipInstances = targets.map(el => {
-          const instance = tippy(el as HTMLElement, {
-            ...options,
-            content: el.getAttribute('content') || this.content,
+      if (this.singleton && !this.for.startsWith('#') && !document.getElementById(this.for)) {
+        const targetEls = Array.from(document.querySelectorAll(`.${this.for}`));
+        if (targetEls.length > 0) {
+          this.tooltipInstances = targetEls.map(el => {
+            const instance = tippy(el as HTMLElement, {
+              ...options,
+              content: el.getAttribute('content') || this.content,
+            });
+            instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
+            return instance;
           });
-          instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
-          return instance;
-        });
-  
-        if (this.singleton && this.tooltipInstances.length > 1) {
+    
           this.singletonInstance = createSingleton(this.tooltipInstances, {
             delay: [75, 0],
             arrow: roundArrow,
             moveTransition: 'transform 0.15s ease-out',
           });
+    
+          if (this.open) queueMicrotask(() => this.singletonInstance?.show());
+          return;
         }
-  
-        if (this.open) {
-          queueMicrotask(() => {
-            this.singletonInstance?.show();
-            this.tooltipInstances?.forEach(t => t.show());
+      }
+    
+      const containerEl = document.getElementById(this.for);
+      if (this.singleton && containerEl) {
+        const childEls = Array.from(containerEl.querySelectorAll('[content]'));
+        if (childEls.length > 0) {
+          this.tooltipInstances = childEls.map(el => {
+            const instance = tippy(el as HTMLElement, {
+              ...options,
+              content: el.getAttribute('content') || this.content,
+            });
+            instance.popper.querySelector('.tippy-box')?.classList.add(this.size);
+            return instance;
           });
+    
+          this.singletonInstance = createSingleton(this.tooltipInstances, {
+            delay: [75, 0],
+            arrow: roundArrow,
+            moveTransition: 'transform 0.15s ease-out',
+          });
+    
+          if (this.open) queueMicrotask(() => this.singletonInstance?.show());
+          return;
         }
-        return;
       }
-  
-      const targetEl = document.getElementById(this.for);
-      if (targetEl) {
-        this.singleInstance = tippy(targetEl, options);
-        this.singleInstance.popper.querySelector('.tippy-box')?.classList.add(this.size);
-        if (this.open) queueMicrotask(() => this.singleInstance?.show());
-        return;
+    
+      this.targetEl = document.getElementById(this.for);
+      if (!this.targetEl) return;
+
+      if (!this.id) {
+        this.generatedId = `nile-tooltip-${Math.random()
+          .toString(36)
+          .slice(2, 9)}`;
+        this.id = this.generatedId;
       }
+
+      this.prevDescribedby = this.targetEl.getAttribute('aria-describedby');
+      const describedby = this.prevDescribedby
+        ? `${this.prevDescribedby} ${this.id}`
+        : this.id;
+      this.targetEl.setAttribute('aria-describedby', describedby);
+
+      this.singleInstance = tippy(this.targetEl, options);
+      if (this.size)
+        this.singleInstance.popper
+          .querySelector('.tippy-box')
+          ?.classList.add(this.size);
+      if (this.open) {
+        queueMicrotask(() => this.singleInstance?.show());
+      }
+      return;
     }
   
     const children = Array.from(this.querySelectorAll('*'));
@@ -253,10 +280,8 @@ export class NileliteTooltip extends NileElement {
       }
   
       if (this.open) {
-        queueMicrotask(() => {
-          this.singletonInstance?.show();
-          this.tooltipInstances?.forEach(t => t.show());
-        });
+        if (this.singletonInstance) this.singletonInstance.show();
+        else this.tooltipInstances.forEach(t => t.show());
       }
     }
   }