Fix chart tooltips (#23435)

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

@@ -61,6 +61,8 @@ export class HaChartBase extends LitElement {
 
   @state() private _chartHeight?: number;
 
+  @state() private _legendHeight?: number;
+
   @state() private _tooltip?: Tooltip;
 
   @state() private _hiddenDatasets: Set<number> = new Set();
@@ -214,10 +216,22 @@ export class HaChartBase extends LitElement {
     this.chart.update("none");
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("data") || changedProperties.has("options")) {
+      if (this.options?.plugins?.legend?.display) {
+        this._legendHeight =
+          this.renderRoot.querySelector(".chart-legend")?.clientHeight;
+      } else {
+        this._legendHeight = 0;
+      }
+    }
+  }
+
   protected render() {
     return html`
       ${this.options?.plugins?.legend?.display === true
-        ? html`<div class="chartLegend">
+        ? html`<div class="chart-legend">
             <ul>
               ${this._datasetOrder.map((index) => {
                 const dataset = this.data.datasets[index];
@@ -249,7 +263,7 @@ export class HaChartBase extends LitElement {
           </div>`
         : ""}
       <div
-        class="animationContainer"
+        class="animation-container"
         style=${styleMap({
           height: `${this.height || this._chartHeight || 0}px`,
           overflow: this._chartHeight ? "initial" : "hidden",
@@ -288,7 +302,7 @@ export class HaChartBase extends LitElement {
           </div>
           ${this._tooltip
             ? html`<div
-                class="chartTooltip ${classMap({
+                class="chart-tooltip ${classMap({
                   [this._tooltip.yAlign]: true,
                 })}"
                 style=${styleMap({
@@ -298,7 +312,7 @@ export class HaChartBase extends LitElement {
               >
                 <div class="title">${this._tooltip.title}</div>
                 ${this._tooltip.beforeBody
-                  ? html`<div class="beforeBody">
+                  ? html`<div class="before-body">
                       ${this._tooltip.beforeBody}
                     </div>`
                   : ""}
@@ -456,6 +470,7 @@ export class HaChartBase extends LitElement {
 
   private _handleChartScroll(ev: MouseEvent) {
     const modifier = isMac ? "metaKey" : "ctrlKey";
+    this._tooltip = undefined;
     if (!ev[modifier] && !this._showZoomHint) {
       this._showZoomHint = true;
       setTimeout(() => {
@@ -498,15 +513,20 @@ export class HaChartBase extends LitElement {
       this._tooltip = undefined;
       return;
     }
+    const boundingBox = this.getBoundingClientRect();
     this._tooltip = {
       ...context.tooltip,
-      top: this.chart!.canvas.offsetTop + context.tooltip.caretY + 12 + "px",
+      top:
+        boundingBox.y +
+        (this._legendHeight || 0) +
+        context.tooltip.caretY +
+        12 +
+        "px",
       left:
-        this.chart!.canvas.offsetLeft +
         clamp(
-          context.tooltip.caretX,
+          boundingBox.x + context.tooltip.caretX,
-          100,
+          boundingBox.x + 100,
-          this.clientWidth - 100 - this._paddingYAxisInternal
+          boundingBox.x + boundingBox.width - 100
         ) -
         100 +
         "px",
@@ -525,16 +545,13 @@ export class HaChartBase extends LitElement {
     return css`
       :host {
         display: block;
-        position: var(--chart-base-position, relative);
+        position: relative;
       }
-      .animationContainer {
+      .animation-container {
         overflow: hidden;
         height: 0;
         transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
       }
-      .chart-container {
-        position: relative;
-      }
       canvas {
         max-height: var(--chart-max-height, 400px);
       }
@@ -542,10 +559,10 @@ export class HaChartBase extends LitElement {
         /* allow scrolling if the chart is not zoomed */
         touch-action: pan-y !important;
       }
-      .chartLegend {
+      .chart-legend {
         text-align: center;
       }
-      .chartLegend li {
+      .chart-legend li {
         cursor: pointer;
         display: inline-grid;
         grid-auto-flow: column;
@@ -554,16 +571,16 @@ export class HaChartBase extends LitElement {
         align-items: center;
         color: var(--secondary-text-color);
       }
-      .chartLegend .hidden {
+      .chart-legend .hidden {
         text-decoration: line-through;
       }
-      .chartLegend .label {
+      .chart-legend .label {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
       }
-      .chartLegend .bullet,
+      .chart-legend .bullet,
-      .chartTooltip .bullet {
+      .chart-tooltip .bullet {
         border-width: 1px;
         border-style: solid;
         border-radius: 50%;
@@ -577,13 +594,13 @@ export class HaChartBase extends LitElement {
         margin-inline-start: initial;
         direction: var(--direction);
       }
-      .chartTooltip .bullet {
+      .chart-tooltip .bullet {
         align-self: baseline;
       }
-      .chartTooltip {
+      .chart-tooltip {
         padding: 8px;
         font-size: 90%;
-        position: absolute;
+        position: fixed;
         background: rgba(80, 80, 80, 0.9);
         color: white;
         border-radius: 4px;
@@ -596,17 +613,17 @@ export class HaChartBase extends LitElement {
         box-sizing: border-box;
         direction: var(--direction);
       }
-      .chartLegend ul,
+      .chart-legend ul,
-      .chartTooltip ul {
+      .chart-tooltip ul {
         display: inline-block;
         padding: 0 0px;
         margin: 8px 0 0 0;
         width: 100%;
       }
-      .chartTooltip ul {
+      .chart-tooltip ul {
         margin: 0 4px;
       }
-      .chartTooltip li {
+      .chart-tooltip li {
         display: flex;
         white-space: pre-line;
         word-break: break-word;
@@ -614,16 +631,16 @@ export class HaChartBase extends LitElement {
         line-height: 16px;
         padding: 4px 0;
       }
-      .chartTooltip .title {
+      .chart-tooltip .title {
         text-align: center;
         font-weight: 500;
         word-break: break-word;
         direction: ltr;
       }
-      .chartTooltip .footer {
+      .chart-tooltip .footer {
         font-weight: 500;
       }
-      .chartTooltip .beforeBody {
+      .chart-tooltip .before-body {
         text-align: center;
         font-weight: 300;
         word-break: break-all;

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

@@ -545,11 +545,7 @@ export class MoreInfoDialog extends LitElement {
           /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
           --vertical-align-dialog: flex-start;
           --dialog-surface-margin-top: 40px;
-          /* This is needed for the tooltip of the history charts to be positioned correctly */
-          --dialog-surface-position: static;
-          --dialog-content-position: static;
           --dialog-content-padding: 0;
-          --chart-base-position: static;
         }
 
         .content {