Fix tooltip issue for uui card

Author: LanThuyNguyen

packages/uui-card-block-type/lib/uui-card-block-type.element.ts

@@ -47,6 +47,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
     return html`
       ${this.#renderMedia()}
       ${this.href ? this.#renderLink() : this.#renderButton()}
+      <div id="name-wrapper" title="${this.name}"></div>
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
       ${this.selectable ? this.renderCheckbox() : nothing}
@@ -107,6 +108,13 @@ export class UUICardBlockTypeElement extends UUICardElement {
         background-color: var(--uui-color-surface-alt);
       }
 
+      #name-wrapper {
+        position: absolute;
+        inset: 0;
+        pointer-events: auto;
+        z-index: 0;
+      }
+
       slot[name='tag'] {
         position: absolute;
         bottom: var(--uui-size-4);

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -116,6 +116,7 @@ export class UUICardContentNodeElement extends UUICardElement {
   public render() {
     return html`
       ${this.href ? this.#renderLink() : this.#renderButton()}
+      <div id="name-wrapper" title="${this.name}"></div>
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
       ${this.selectable ? this.renderCheckbox() : nothing}
@@ -133,6 +134,13 @@ export class UUICardContentNodeElement extends UUICardElement {
         justify-content: space-between;
       }
 
+      #name-wrapper {
+        position: absolute;
+        inset: 0;
+        pointer-events: auto;
+        z-index: 0;
+      }
+
       slot[name='tag'] {
         position: absolute;
         bottom: var(--uui-size-4);

packages/uui-card-media/lib/uui-card-media.element.ts

@@ -113,6 +113,7 @@ export class UUICardMediaElement extends UUICardElement {
   public render() {
     return html` ${this.renderMedia()}
       <slot @slotchange=${this.queryPreviews}></slot>
+      <div id="name-wrapper" title="${this.name}"></div>
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after .open-part -->
       <div id="select-border"></div>
@@ -198,6 +199,13 @@ export class UUICardMediaElement extends UUICardElement {
         overflow-wrap: anywhere;
       }
 
+      #name-wrapper {
+        position: absolute;
+        inset: 0;
+        pointer-events: auto;
+        z-index: 0;
+      }
+
       :host([image]:not([image=''])) #open-part {
         transition: opacity 0.5s 0.5s;
         opacity: 0;

packages/uui-card-user/lib/uui-card-user.element.ts

@@ -89,6 +89,7 @@ export class UUICardUserElement extends UUICardElement {
   public render() {
     return html`
       ${this.href ? this.#renderLink() : this.#renderButton()}
+      <div id="name-wrapper" title="${this.name}"></div>
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
       ${this.selectable ? this.renderCheckbox() : nothing}
@@ -104,6 +105,13 @@ export class UUICardUserElement extends UUICardElement {
         min-width: 250px;
       }
 
+      #name-wrapper {
+        position: absolute;
+        inset: 0;
+        pointer-events: auto;
+        z-index: 0;
+      }
+
       slot:not([name])::slotted(*) {
         font-size: var(--uui-type-small-size);
         line-height: var(--uui-size-6);