Add support for cell and column header tooltips in the dataframe component #6561
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
lukasmasuch
added
the
security-assessment-completed
|
Looks good! I think this is complex functionality and it is almost impossible to implement this simpler (without a workaround of invisible divs etc.) I think we should add a couple of scenarios for manual testing during the QA process, since they would be difficult to test automatically, e.g. tooltip behavior when scrolling or resizing happens. |
Yep, agreed! I will start a document for QA and write that down 👍 I really hope that it will get a bit easier with playwright web to test these interactive scenarios e2e 🤞 |
Yep, I investigated for quite some time to find another way... but it seems impossible with what baseweb provides us, and I decided against adding another tooltip library just for this case. At least with this implementation, we can reuse parts of the styles. |
* develop: Decouple MetricsManager from AppNode (streamlit#6557) Fix top padding on sidebar when embed is true (streamlit#6565) Add support for cell and column header tooltips in the dataframe component (streamlit#6561) Update dataframe column properties on frontend (streamlit#6554) Show warning for unsafe integer cells in `st.dataframe` (streamlit#6549) Add icon for editable columns in `st.data_editor` (streamlit#6550) Unify missing values to None in the returned datastructure by `st.data_editor`. (streamlit#6544) Clean up and reorganize element tree module (streamlit#6522) ESLint: use `--cache` flag (30x speedup!) (streamlit#6555) Replace `st.connection` with `st.experimental_connection` in docstring examples (streamlit#6553) Improve editing on touch devices for `st.data_editor` (streamlit#6548) Move pandas styler logic to dedicated module (streamlit#6543)
📚 Context
This PR implements tooltip capabilities for the dataframe frontend component (
st.dataframe&st.data_editor). This will enable us to implement column-level help tooltips (when hovering the column header) and cell-level tooltips for showing warnings or other information.The way how the tooltip component is implemented is a bit of a workaround: For the most part it is the same as the shared tooltip implementation, but we cannot use that one since it is a StatefulTooltip and requires a target component and cannot be triggered programmatically. We need to be able to position the tooltip anywhere on the screen, so we use a Popover instead. Since Popover doesn't support positioning to a virtual position, which requires us to use an invisible div as a workaround.
What kind of change does this PR introduce?
Screen.Recording.2023-04-14.at.20.25.27.mov
🧪 Testing Done
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.