Tooltips and css filter

[zanix]

I kept diving into the tooltip issue and I have discovered that using filter or backdrop-filter is what was causing the toolip to overflow the More Info container.

While this is mostly fixed with this css

      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface,
      .mdc-dialog .mdc-dialog__content {
        overflow: visible;
      }

This causes any popup window that is larger than the screen to overflow like in #59

Removing the blur and color hue shift on the history chart fixes the issues, but then you have no blur

      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
        }
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface,
      .mdc-dialog .mdc-dialog__content {
        overflow: visible;
      }

    ha-more-info-history$state-history-charts:
      $:
        state-history-chart-timeline$: |
          .chartTooltip {
            margin-top: -200px;
          }
    ha-more-info-info:
      $:
        ha-more-info-history:
          $: |
            state-history-charts, statistics-chart {
              filter: hue-rotate(calc(var(--hue-primary-color) - 212deg)) saturate(3) brightness(0.66)
            }

It seems like filter is buggy when it comes to overflow but I don't have enough css knowledge to even begin to work around it.

[Madelena]

Yeah, that's pretty much the case. I prioritized the overall appearance over the occasional bug when a more-info card gets too long.

I think most HA tooltips on more-info appear on history graphs, and they had coded the tooltip to always pop open within the chart area.

[zanix]

Well dang it. Gotta love Chrome rendering bugs huh?