diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
index 6c0318abbc..3827599242 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
@@ -203,7 +203,7 @@
           @if (item.dataDescriptor?.connectivity?.length) {
             <div class="dlg-meta-group dlg-meta-details-section">
               <span class="dlg-meta-label">{{ 'iot-hub.connectivity' | translate }}</span>
-              <div class="dlg-meta-chips" tb-chip-overflow chipSelector=".dlg-chip" overflowClass="dlg-chip dlg-chip-category" [gap]="4" [minChips]="2">
+              <div class="dlg-meta-chips" tb-chip-overflow chipSelector=".dlg-chip" overflowClass="dlg-chip dlg-chip-category" [gap]="4" [minChips]="2" showOverflowedTitle>
                 @for (conn of item.dataDescriptor.connectivity; track conn) {
                   <span class="dlg-chip dlg-chip-category">{{ conn }}</span>
                 }
@@ -214,7 +214,7 @@
           @if (item.categories?.length) {
             <div class="dlg-meta-group dlg-meta-details-section">
               <span class="dlg-meta-label">{{ 'iot-hub.category' | translate }}</span>
-              <div class="dlg-meta-chips" tb-chip-overflow chipSelector=".dlg-chip" overflowClass="dlg-chip dlg-chip-category" [gap]="4" [minChips]="2">
+              <div class="dlg-meta-chips" tb-chip-overflow chipSelector=".dlg-chip" overflowClass="dlg-chip dlg-chip-category" [gap]="4" [minChips]="2" showOverflowedTitle>
                 @for (cat of item.categories; track cat) {
                   <span class="dlg-chip dlg-chip-category">{{ cat }}</span>
                 }
@@ -225,7 +225,7 @@
         @if (item.useCases?.length) {
           <div class="dlg-meta-group dlg-meta-details-section">
             <span class="dlg-meta-label">{{ 'iot-hub.use-cases' | translate }}</span>
-            <div class="dlg-meta-chips" tb-chip-overflow chipSelector=".dlg-chip" overflowClass="dlg-chip dlg-chip-usecase" [gap]="4">
+            <div class="dlg-meta-chips" tb-chip-overflow chipSelector=".dlg-chip" overflowClass="dlg-chip dlg-chip-usecase" [gap]="4" showOverflowedTitle>
               @for (uc of item.useCases; track uc) {
                 <span class="dlg-chip dlg-chip-usecase">{{ uc }}</span>
               }
diff --git a/ui-ngx/src/app/shared/directives/chip-overflow.directive.ts b/ui-ngx/src/app/shared/directives/chip-overflow.directive.ts
index 7ed84f10e7..10585f1453 100644
--- a/ui-ngx/src/app/shared/directives/chip-overflow.directive.ts
+++ b/ui-ngx/src/app/shared/directives/chip-overflow.directive.ts
@@ -15,6 +15,7 @@
 ///
 
 import { AfterViewInit, Directive, ElementRef, Input, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Directive({
   selector: '[tb-chip-overflow]',
@@ -28,6 +29,10 @@ export class ChipOverflowDirective implements AfterViewInit, OnDestroy {
   @Input() overflowClass = 'tb-overflow-chip';
   @Input() minChips = 1;
 
+  @Input()
+  @coerceBoolean()
+  showOverflowedTitle = false;
+
   private resizeObserver?: ResizeObserver;
   private mutationObserver?: MutationObserver;
   private overflowEl!: HTMLElement;
@@ -151,6 +156,7 @@ export class ChipOverflowDirective implements AfterViewInit, OnDestroy {
     // 4. Determine which chips fit
     let usedWidth = 0;
     let hiddenCount = 0;
+    const hiddenChips: HTMLElement[] = [];
     const minChips = Math.max(1, this.minChips);
 
     for (let i = 0; i < chips.length; i++) {
@@ -163,12 +169,29 @@ export class ChipOverflowDirective implements AfterViewInit, OnDestroy {
         usedWidth = nextUsedWidth;
       } else {
         hiddenCount++;
+        hiddenChips.push(chips[i]);
       }
     }
 
     if (hiddenCount > 0) {
       this.renderer.setProperty(this.overflowEl, 'textContent', this.overflowTemplate.replace('{n}', String(hiddenCount)));
       this.renderer.setStyle(this.overflowEl, 'display', 'inline-flex');
+      if (this.showOverflowedTitle) {
+        const title = hiddenChips
+          .map(chip => (chip.textContent || '').trim())
+          .filter(text => !!text)
+          .join(', ');
+        this.renderer.setAttribute(this.overflowEl, 'title', title);
+        // Allow pointer interaction so the browser's native title
+        // tooltip appears on hover.
+        this.renderer.removeStyle(this.overflowEl, 'pointerEvents');
+      } else {
+        this.renderer.removeAttribute(this.overflowEl, 'title');
+        this.renderer.setStyle(this.overflowEl, 'pointerEvents', 'none');
+      }
+    } else {
+      this.renderer.removeAttribute(this.overflowEl, 'title');
+      this.renderer.setStyle(this.overflowEl, 'pointerEvents', 'none');
     }
   }
 }