appsmith
appsmith copied to clipboard
appsmithorg
[Feature]: Allow Disabling the Tooltip for a Table Column
Is there an existing issue for this?
- [X] I have searched the existing issues
Description
When hovering on a column of the Table widget where the text is longer, it gets displayed in a tooltip. If the text is very long, it covers the whole table, resulting in a bad user experience. Turning on Cell Wrapping is also not an option, as it is not desired to show the whole content in the cell. Therefore, we need to allow users to disable/enable the tooltip as needed.
Steps To Reproduce
- Add a Table widget to the canvas.
- Ensure one of the cells contains a very long text.
Public Sample App
No response
Environment
Production
Issue video log
No response
Version
Cloud/Self Hosted
on the other hand I feel having such huge context on table is not really intuitive. cc @dilippitchika @keyurparalkar @momcilo-appsmith
Chiming in here as the original user reporting the issue :) Re the long table field - so the use-case for us was, that this table contains questions and answers, and it is embedded within a list-details view, with the selected row's full data being displayed in text fields beneath the table. The intent of having some of the answer displayed in the table is to get a "preview" of the answer within the table, and also pulls the data to be used in the text field below. A possible workaround we can try is to send the field twice in the query - as a short and long version, with the long version being a hidden column in the table and only displayed in the details page. But this would be much less convenient than simply having the tooltip disabled :)
@harelguy i don't think this is so complex, here's me showing an example of how this will work and how you can implement it using the new Ask AI feature we have in appsmith - https://www.loom.com/share/7a17ebd655e346409193b0d67e5168c7
also interested in this feature request - the above workaround doesn't work for me since I need users to be able to click on the cell to copy the full contents of the cell
@rubabuddin how about something like this, we use a button to copy the content to clipboard rather than showing it to the user. I am using the table triggeredRow prop to refer to the content that I want to copy on click on a button on the table. I have added a small video to explaining the same. LMK what you think
https://github.com/appsmithorg/appsmith/assets/11089579/b129a310-d8a6-4d57-b860-027156b3688d
I have the same requirement. Table cell data is huge so the popup will fill up the whole screen.
I have the same problem. Because the tooltip is so big that it hides the cell, I cannot make the tootltip disappear. If I adjust the cell width to make it larger than the tooltip, it works but still sometimes have to move the mouse around a lot to make the tooltip disappear, resulting in bad user experience.
I am also facing a similar issue with the tooltips. I have a very long text in one of the fields in the table, and the tooltip sometimes gets frozen in the UI even after removing the cursor. It would be great if the team could provide an option to disable or customize the tooltips.
Another user on Discord is facing this issue: https://discord.com/channels/725602949748752515/1254951249346822186
This actually seems like two different issues. There's the length of the tooltip, and the fact that it's not dismissing. When the tooltip does not dismiss, this forces the user to refresh the whole page. If it would dismiss then the length wouldn't be such an issue.
If we could fix the dismiss behavior that would unblock most users. We should also add a max-length property or just truncate the tooltip automatically, but that's more for looks, and not as much of a blocker as the dismiss behavior.
Hey folks, sharing a possible solution here: truncating the tooltip content when it overflows. A short loom video showcasing this: https://www.loom.com/share/0984f7575c4c4bc5977d91aaf4e2c5d9?sid=91ab643b-7bf6-45a6-b179-b9266d737820
Let me know your thoughts or concerns. @rubabuddin @jagadeeshjr5 @leagscc @harelguy
