Interactive Tooltip Requirement for Read-Only Grid

Hi everyone,

We have a UI requirement involving a read-only data grid. The grid displays values such as student names. When a user hovers over a grid cell, we want to show a clickable tooltip containing a list of related items. Each item in the tooltip should be clickable, and clicking on it should open a dialog box with detailed information.

Example Scenario:

  • The grid displays student names.
  • On hovering over a student name, a tooltip appears showing a list of mark sheets by year.
  • Clicking on a specific year opens a dialog box displaying that year's mark sheet.

Looking for suggestions or best practices on how to implement this kind of interactive tooltip behavior. Has anyone tackled something similar or used a library/component that supports this?

Something like: 

But the marksheet should be a Dialog Box that is associated with a record action.

Thanks in advance!

  Discussion posts and replies are publicly visible

Parents Reply Children