From 20c194056732a01a2474249d7f55934ed9e08f75 Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Tue, 25 Nov 2025 17:27:40 +0700
Subject: [PATCH] Fix tooltip issue for uui card

---
 .../lib/uui-card-block-type.element.ts                    | 8 ++++++++
 .../lib/uui-card-content-node.element.ts                  | 8 ++++++++
 packages/uui-card-media/lib/uui-card-media.element.ts     | 8 ++++++++
 packages/uui-card-user/lib/uui-card-user.element.ts       | 8 ++++++++
 4 files changed, 32 insertions(+)

diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
index 84d010782..ee55557b6 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
+++ b/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);
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
index 28440ba03..60d580b9b 100644
--- a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
+++ b/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);
diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index 8d796c363..d4520962d 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/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;
diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts
index b88cfe1ef..810d57ff4 100644
--- a/packages/uui-card-user/lib/uui-card-user.element.ts
+++ b/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);