Add title property to elements showing entity names (#9264)

src/components/chart/ha-chart-base.ts

@@ -86,6 +86,7 @@ export default class HaChartBase extends LitElement {
                   class=${classMap({
                     hidden: this._hiddenDatasets.has(index),
                   })}
+                  .title=${dataset.label}
                 >
                   <div
                     class="bullet"

src/components/entity/ha-state-label-badge.ts

@@ -88,7 +88,7 @@ export class HaStateLabelBadge extends LitElement {
           entityState,
           this._timerTimeRemaining
         )}
-        .description=${this.name ? this.name : computeStateName(entityState)}
+        .description=${this.name ?? computeStateName(entityState)}
       ></ha-label-badge>
     `;
   }

src/components/entity/state-info.ts

@@ -24,13 +24,15 @@ class StateInfo extends LitElement {
       return html``;
     }
 
+    const name = computeStateName(this.stateObj);
+
     return html`<state-badge
         .stateObj=${this.stateObj}
         .stateColor=${true}
       ></state-badge>
       <div class="info">
-        <div class="name" .inDialog=${this.inDialog}>
+        <div class="name" .title=${name} .inDialog=${this.inDialog}>
-          ${computeStateName(this.stateObj)}
+          ${name}
         </div>
         ${this.inDialog
           ? html`<div class="time-ago">

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -94,12 +94,14 @@ export class MoreInfoDialog extends LitElement {
     }
     const entityId = this._entityId;
     const stateObj = this.hass.states[entityId];
-    const domain = computeDomain(entityId);
 
     if (!stateObj) {
       return html``;
     }
 
+    const domain = computeDomain(entityId);
+    const name = computeStateName(stateObj);
+
     return html`
       <ha-dialog
         open
@@ -119,8 +121,13 @@ export class MoreInfoDialog extends LitElement {
             >
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
             </mwc-icon-button>
-            <div slot="title" class="main-title" @click=${this._enlarge}>
+            <div
-              ${computeStateName(stateObj)}
+              slot="title"
+              class="main-title"
+              .title=${name}
+              @click=${this._enlarge}
+            >
+              ${name}
             </div>
             ${this.hass.user!.is_admin
               ? html`

src/panels/lovelace/cards/hui-button-card.ts

@@ -143,6 +143,10 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       `;
     }
 
+    const name = this._config.show_name
+      ? this._config.name || (stateObj ? computeStateName(stateObj) : "")
+      : "";
+
     return html`
       <ha-card
         @action=${this._handleAction}
@@ -186,12 +190,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
             `
           : ""}
         ${this._config.show_name
-          ? html`
+          ? html`<span tabindex="-1" .title=${name}>${name}</span>`
-              <span tabindex="-1">
-                ${this._config.name ||
-                (stateObj ? computeStateName(stateObj) : "")}
-              </span>
-            `
           : ""}
         ${this._config.show_state && stateObj
           ? html`<span class="state">

src/panels/lovelace/cards/hui-entity-card.ts

@@ -115,12 +115,12 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
       ? this._config.attribute in stateObj.attributes
       : !UNAVAILABLE_STATES.includes(stateObj.state);
 
+    const name = this._config.name || computeStateName(stateObj);
+
     return html`
       <ha-card @click=${this._handleClick} tabindex="0">
         <div class="header">
-          <div class="name">
+          <div class="name" .title=${name}>${name}</div>
-            ${this._config.name || computeStateName(stateObj)}
-          </div>
           <div class="icon">
             <ha-icon
               .icon=${this._config.icon || stateIcon(stateObj)}

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -119,6 +119,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       `;
     }
 
+    const name = this._config.name ?? computeStateName(stateObj);
+
     // Use `stateObj.state` as value to keep formatting (e.g trailing zeros)
     // for consistent value display across gauge, entity, entity-row, etc.
     return html`
@@ -138,9 +140,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
           .needle=${this._config!.needle}
           .levels=${this._config!.needle ? this._severityLevels() : undefined}
         ></ha-gauge>
-        <div class="name">
+        <div class="name" .title=${name}>${name}</div>
-          ${this._config.name || computeStateName(stateObj)}
-        </div>
       </ha-card>
     `;
   }

src/panels/lovelace/cards/hui-glance-card.ts

@@ -278,6 +278,8 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
       </div>`;
     }
 
+    const name = entityConf.name ?? computeStateName(stateObj);
+
     return html`
       <div
         class="entity"
@@ -292,13 +294,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
         )}
       >
         ${this._config!.show_name
-          ? html`
+          ? html` <div class="name" .title=${name}>${name}</div> `
-              <div class="name">
-                ${"name" in entityConf
-                  ? entityConf.name
-                  : computeStateName(stateObj)}
-              </div>
-            `
           : ""}
         ${this._config!.show_icon
           ? html`

src/panels/lovelace/cards/hui-humidifier-card.ts

@@ -173,7 +173,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
               </div>
             </div>
           </div>
-          <div id="info">${name}</div>
+          <div id="info" .title=${name}>${name}</div>
         </div>
       </ha-card>
     `;

src/panels/lovelace/cards/hui-light-card.ts

@@ -96,6 +96,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     const brightness =
       Math.round((stateObj.attributes.brightness / 255) * 100) || 0;
 
+    const name = this._config.name ?? computeStateName(stateObj);
+
     return html`
       <ha-card>
         <mwc-icon-button
@@ -145,7 +147,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
             </div>
           </div>
 
-          <div id="info">
+          <div id="info" .title=${name}>
             ${UNAVAILABLE_STATES.includes(stateObj.state)
               ? html`
                   <div>
@@ -157,7 +159,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
                   </div>
                 `
               : html` <div class="brightness">%</div> `}
-            ${this._config.name || computeStateName(stateObj)}
+            ${name}
           </div>
         </div>
       </ha-card>

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -251,7 +251,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
               </div>
             </div>
           </div>
-          <div id="info">
+          <div id="info" .title=${name}>
             <div id="modes">
               ${(stateObj.attributes.hvac_modes || [])
                 .concat()

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -190,6 +190,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     }
 
     const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
+    const name = this._config.name ?? computeStateName(stateObj);
 
     return html`
       <ha-card
@@ -221,9 +222,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                   this.hass.locale
                 )}
               </div>
-              <div class="name">
+              <div class="name" .title=${name}>${name}</div>
-                ${this._config.name || computeStateName(stateObj)}
-              </div>
             </div>
             <div class="temp-attribute">
               <div class="temp">

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -54,6 +54,7 @@ class HuiGenericEntityRow extends LitElement {
         !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this.config.entity)));
 
     const hasSecondary = this.secondaryText || this.config.secondary_info;
+    const name = this.config.name ?? computeStateName(stateObj);
 
     return html`
       <state-badge
@@ -82,8 +83,9 @@ class HuiGenericEntityRow extends LitElement {
           hasHold: hasAction(this.config!.hold_action),
           hasDoubleClick: hasAction(this.config!.double_tap_action),
         })}
+        .title=${name}
       >
-        ${this.config.name || computeStateName(stateObj)}
+        ${name}
         ${hasSecondary
           ? html`
               <div class="secondary">

src/panels/lovelace/special-rows/hui-button-row.ts

@@ -50,6 +50,9 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
         ? this.hass.states[this._config.entity]
         : undefined;
 
+    const name =
+      this._config.name ?? (stateObj ? computeStateName(stateObj) : "");
+
     return html`
       <ha-icon
         .icon=${this._config.icon ||
@@ -57,9 +60,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
       >
       </ha-icon>
       <div class="flex">
-        <div>
+        <div .title=${name}>${name}</div>
-          ${this._config.name || (stateObj ? computeStateName(stateObj) : "")}
-        </div>
         <mwc-button
           @action=${this._handleAction}
           .actionHandler=${actionHandler({

src/panels/lovelace/special-rows/hui-section-row.ts

@@ -26,7 +26,11 @@ class HuiSectionRow extends LitElement implements LovelaceRow {
     return html`
       <div class="divider"></div>
       ${this._config.label
-        ? html` <div class="label">${this._config.label}</div> `
+        ? html`
+            <div class="label" .title=${this._config.label}>
+              ${this._config.label}
+            </div>
+          `
         : html``}
     `;
   }

src/panels/lovelace/special-rows/hui-text-row.ts

@@ -22,8 +22,8 @@ class HuiTextRow extends LitElement implements LovelaceRow {
 
     return html`
       <ha-icon .icon=${this._config.icon}></ha-icon>
-      <div class="name">${this._config.name}</div>
+      <div class="name" .title=${this._config.name}>${this._config.name}</div>
-      <div class="text">${this._config.text}</div>
+      <div class="text" .title=${this._config.text}>${this._config.text}</div>
     `;
   }
 

src/panels/lovelace/special-rows/hui-weblink-row.ts

@@ -36,7 +36,7 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow {
         ?download=${this._config.download}
       >
         <ha-icon .icon=${this._config.icon}></ha-icon>
-        <div>${this._config.name}</div>
+        <div .title=${this._config.name}>${this._config.name}</div>
       </a>
     `;
   }