Add tooltips to the gauges (#9676)

src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts

@@ -1,3 +1,5 @@
+import { mdiInformation } from "@mdi/js";
+import "@polymer/paper-tooltip";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -5,6 +7,7 @@ import { styleMap } from "lit/directives/style-map";
 import { round } from "../../../../common/number/round";
 import "../../../../components/ha-card";
 import "../../../../components/ha-gauge";
+import "../../../../components/ha-svg-icon";
 import {
   EnergyData,
   energySourcesByType,
@@ -118,8 +121,14 @@ class HuiEnergyCarbonGaugeCard
     }
 
     return html`
-      <ha-card
+      <ha-card>
-        >${value !== undefined
+        <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
+        <paper-tooltip animation-delay="0" for="info" position="left">
+          This card represents how much of the energy consumed by your home was
+          generated using non-fossil fuels like solar, wind and nuclear.
+        </paper-tooltip>
+
+        ${value !== undefined
           ? html` <ha-gauge
                 min="0"
                 max="100"
@@ -176,6 +185,18 @@ class HuiEnergyCarbonGaugeCard
         font-size: 15px;
         margin-top: 8px;
       }
+
+      ha-svg-icon {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        color: var(--secondary-text-color);
+      }
+      paper-tooltip {
+        width: 80%;
+        max-width: 250px;
+        margin-top: 10%;
+      }
     `;
   }
 }

src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts

@@ -1,8 +1,11 @@
+import { mdiInformation } from "@mdi/js";
+import "@polymer/paper-tooltip";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatNumber } from "../../../../common/string/format_number";
 import "../../../../components/ha-card";
+import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-gauge";
 import type { LevelDefinition } from "../../../../components/ha-gauge";
 import {
@@ -91,6 +94,13 @@ class HuiEnergyGridGaugeCard
 
     return html`
       <ha-card>
+        <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
+        <paper-tooltip animation-delay="0" for="info" position="left">
+          This card represents your energy dependency. If it's green, it means
+          you produced more energy than that you consumed from the grid. If it's
+          in the red, it means that you relied on the grid for part of your
+          home's energy consumption.
+        </paper-tooltip>
         ${value !== undefined
           ? html`<ha-gauge
                 min="-1"
@@ -142,6 +152,18 @@ class HuiEnergyGridGaugeCard
         font-size: 15px;
         margin-top: 8px;
       }
+
+      ha-svg-icon {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        color: var(--secondary-text-color);
+      }
+      paper-tooltip {
+        width: 80%;
+        max-width: 250px;
+        margin-top: 10%;
+      }
     `;
   }
 }

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -1,9 +1,12 @@
+import { mdiInformation } from "@mdi/js";
+import "@polymer/paper-tooltip";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import "../../../../components/ha-card";
 import "../../../../components/ha-gauge";
+import "../../../../components/ha-svg-icon";
 import {
   EnergyData,
   energySourcesByType,
@@ -81,6 +84,13 @@ class HuiEnergySolarGaugeCard
 
     return html`
       <ha-card>
+        <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
+        <paper-tooltip animation-delay="0" for="info" position="left">
+          This card represents how much of the solar energy was not used by your
+          home and was returned to the grid. If you frequently return a lot, try
+          to conserve this energy by installing a battery or buying an electric
+          car to charge.
+        </paper-tooltip>
         ${value !== undefined
           ? html`<ha-gauge
                 min="0"
@@ -137,6 +147,18 @@ class HuiEnergySolarGaugeCard
         font-size: 15px;
         margin-top: 8px;
       }
+
+      ha-svg-icon {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        color: var(--secondary-text-color);
+      }
+      paper-tooltip {
+        width: 80%;
+        max-width: 250px;
+        margin-top: 10%;
+      }
     `;
   }
 }