Tweaks to tooltips

Author: Templarian

src/pg/avatar/__examples__/basic/basic.ts

@@ -33,9 +33,11 @@ export default class XPgAvatarBasic extends HTMLElement {
   handleTooltip(e) {
     const { visible, rect, text, position } = e.detail;
     this.$tooltip.visible = visible;
-    this.$tooltip.rect = rect;
-    this.$tooltip.text = text;
-    this.$tooltip.position = position;
+    if (visible) {
+      this.$tooltip.rect = rect;
+      this.$tooltip.text = text;
+      this.$tooltip.position = position;
+    }
     e.stopPropagation();
   }
 }

src/pg/tabs/tabs.ts

@@ -34,7 +34,6 @@ export default class PgTabs extends HTMLElement {
       connect: ($tab, tab, $tabs) => {
         $tab.addEventListener('select', (e: any) => {
           const { index } = e.detail;
-          console.log(index, this.#tabs[e.detail.index]);
           const elements = this.$slot.assignedElements() as PgTab[];
           elements[this.#selectedTab].hide();
           $tabs[this.#selectedTab].selected = false;
@@ -74,7 +73,7 @@ export default class PgTabs extends HTMLElement {
     e.stopPropagation();
   }
 
-  handleSlotChange(e) {
+  handleSlotChange(e: Event) {
     const tabs = Array.from(this.$tabset.children) as PgPartialTab[];
     const elements = this.$slot.assignedElements() as PgTab[];
     if (elements.length !== 0) {

src/pg/tooltip/addTooltip.ts

@@ -1,3 +1,5 @@
+import { BOTTOM } from "./position";
+
 export function addTooltip($part, render, position?) {
   function handleMouseEnter() {
     $part.dispatchEvent(
@@ -6,7 +8,7 @@ export function addTooltip($part, render, position?) {
           visible: true,
           rect: $part.getBoundingClientRect(),
           text: render(),
-          position: position
+          position: position ?? BOTTOM
         },
         bubbles: true,
         composed: true