Add (i) tooltip button for More Info functionality on mobile devices & tooltip z-index fix

[k3a]

Breaking change

Proposed change

Some people complained that tapping on a chart to open More Info dialog instantly is not a common or expected behavior on mobile UIs.

Therefore this PR adjusts the functionality by introducing a tooltop-footer slot in the ha-chart-base component. This slot is then used by the state-history-chart-line and the state-history-chart-timeline to conditionally display a clickable (i) info button in the tooltip footer.

The decision to display this tooltip button is based on a type of native touch/mouse event which triggered onTap or onHover on the chart. For mouse events, the tooltip button is not visible and a click on a chart opens More Info directly (the current state). For non-mouse events, this (i) info button is displayed and can be additionally tapped on to display More Info.

The decision to use a clickable (i) tooltip button instead of just reacting to a tap on the tooltip itself was made because sometimes a tap on a tooltip is a valid action if there is a graph data point under the tooltip which a user wants to select. Therefore it is best to keep this functionality and just add this small clickable (i) instead.

Additionally, this PR also decreases the z-index CSS rule of the tooptip div from 1000 to 1 to prevent over-drawing of the sidebar or dialogs with chart tooltips.

I also set user-select CSS rule to none on the tooltip div to avoid selecting text on a tooltip in History panel.

Type of change

• [ ] Dependency upgrade
• [x] Bugfix (non-breaking change which fixes an issue)
• [x] New feature (thank you!)
• [ ] Breaking change (fix/feature causing existing functionality to break)
• [ ] Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue:
  • fixes #18344
  • fixes #18784
  • fixes #18198
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• [x] The code change is tested and works locally.
• [x] There is no commented out code in this PR.
• [ ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [ ] Documentation added/updated for www.home-assistant.io

[bramkragten]

I'm not sure about the icon in the footer of the tooltip, I do think the checking for mouse or touch event is good, mind if I take that out to put in the 2024.2 release?

[k3a]

That icon is a "button" on mobile, however it is not visible on desktop (when hovering the mouse pointer). On mobile, you may still tap anywhere else on the tooltip and have it propagate to the chart (to choose a different chart data point). Not having this button and only reacting to a tap on the tooltip would be bad UX-wise because it would prevent you from selecting other chart data points that are under it.

But I know that (i) icon is not the nicest thing. It expects that people would find out that it is tappable which I am not 100% sure. On the other hand, there is (i) on other places in HA, I use (i) in Developer Tools/States regularly. There are not that many alternative options. One option would be to have a link there with "More Info" text or something like that, I tried this initially but it looked too "noisy". I haven't tried to make its font smaller, though, but still, having a clickable link on tooltip seems worse to me.

As for me, I'm fine with the existing situation (without this PR), however other people complained in the connected problems, so I created this PR to make them happier. I'm not sure whether they are the majority. On the other hand, it really seem unusual that tapping on a chart opens a dialog.. I believe this PR will make everyone pleased, but I cannot guarantee it.

Removing access to More info on mobile entirely will make me force to use the current HA version forever (or update my personal fork every couple of years). But I can live with that, too. So whatever, you are the boss. :)

[bramkragten]

I think putting an actionable item in the tooltip will always be a problem, as it might not be expected and could prevent the user from interacting with the chart, especially on small charts with big tooltips.

I will discuss this with our UX team.

@matthiasdebaat

[ColColonCleaner]

This is fantastic! I really dislike needing to hold and wait before releasing my finger when trying to read a value off the history graphs on mobile. If I release too early it jumps into the more info page of the entity I was already looking at. Leads to a loop of history -> info -> history -> info when I'm just trying to see the value of the graph at a specific point in time. Tapping a button on the tooltip is great for mobile imo.

[github-actions[bot]]

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days. Thank you for your contributions.

[ColColonCleaner]

Still would very much like to see this functionality. While the recent changes that prevent accidentally opening the info page when reading values on graphs is great, it was very annoying accidentally doing that, now there isn't a way to do it intentionally on mobile at all. You now need to find the entity manually on another page or have an additional card. An optional (i) button, or something equivalent, that lets you open the info page would be very nice.

[matthiasdebaat]

Thanks @k3a for this PR! I've looked into this from a UX point of view. The problem, as I see it, is that it's not clear what will happen when you tap the graph on mobile. Our users would assume what would happen based on experience and different mental models. We have two options:

• Open the more-info dialog for more details about the entity.
• Show tooltip, which shows more accurate detailed information on the graph itself.

In the case of our history graph card, you can have multiple entities on one card. Right now, the more-info dialog of an entity opens when you tap the right little line. This is consistent with the design pattern that opens up more-info about an entity when you tap anywhere other than the action. But I think we should be coherent here.

I agree with your PR to always show the tooltip on tap. The primary function of the card is to display and compare data. Next step could be to get more details about the entity. Currently we break this flow.

I like that you made a difference between tap and click devices. Design wise I would suggest to have a clear label instead of the (i) icon. For example the text button with the label More info.