Feature request: only show state on hover

[ettom]

I'd like to hide the state by default and only show it when hovering over the graph (or selecting data points). Having "hover" as a possible value for state in the show options would be great.

[ildar170975]

Means - the "state" label should be preallocated and shown if some point is selected? If 95% of time no point is selected then the card's area will have an empty space.

point is NO selected (made in MS Paint):

point is selected:

[ettom]

I think it shouldn't be preallocated, this would kind of defeat the purpose.

I mean something like:

This can be achieved like this:

- type: custom:mini-graph-card
  card_mod:
    style: |
      div.states {
        display: none !important;
      }
      ha-card:hover div.states {
        display:block !important;
      }

Of course, if a similar method is used, but for hovering on the point, then the following happens:

For reference:

div.states {
  display: none !important;
}    
ha-card:has(.line--point:hover) div.states {
  display: block !important;
}

A better solution would be to "lock" the state into view, once a point is first hovered on. Probably pretty hacky with just CSS, but should be easy enough with JS?

[ildar170975]

A card which changes it's size is not a good idea.

[ex-nerd]

I came here to file a similar request for my AQI card (a mix of custom:stack-in-card, markdown, gauge, and mini-graph-card), and landed on a slightly different solution for the hover workaround:

        div.states {
          display: none !important;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        ha-card:hover div.states {
          display:block !important;
        }

As you can see, it places the info in the lower left:

However, this is still not ideal, since it always shows the "current" state unless you're hovering over the exact point in question (ideally, the hover would only apply to the points, or to the entire vertical area above/below the point).

As you can see below, this also runs into issues where the text overlays the graph. I tried to put a partially opaque box around the whole thing, too, but my css skills are a decade out of date and I can't quite figure out how to get the state div to wrap around the time codes (which just overflow out of it):

Not ideal, but I think it's still an improvement over the state always showing up, wasting space, or the card jumping around in size when you hover. Ideally, it would live "under" the graph line so you can mouse over every point, but above the color fill, and have enough of a border so it doesn't blend into the color fill.

[ildar170975]

So, a similar layout can be achieved by card-mod. There is no sense to implement it in mini-graph-card directly.