From 8ab61b5468a045a730d0a6f4b8d11be9f55cbd80 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 23 Apr 2024 13:50:44 +0200
Subject: [PATCH] Add title when text in datatable doesnt fit (#20590)

---
 src/components/data-table/ha-data-table.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 553fa07777..148e5414b5 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -450,6 +450,8 @@ export class HaDataTable extends LitElement {
           }
           return html`
             <div
+              @mouseover=${this._setTitle}
+              @focus=${this._setTitle}
               role=${column.main ? "rowheader" : "cell"}
               class="mdc-data-table__cell ${classMap({
                 "mdc-data-table__cell--flex": column.type === "flex",
@@ -675,6 +677,13 @@ export class HaDataTable extends LitElement {
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
   };
 
+  private _setTitle(ev: Event) {
+    const target = ev.currentTarget as HTMLElement;
+    if (target.scrollWidth > target.offsetWidth) {
+      target.setAttribute("title", target.innerText);
+    }
+  }
+
   private _checkedRowsChanged() {
     // force scroller to update, change it's items
     if (this._items.length) {