UI – Place all TooltipWrapper tooltips on the bottom
#19002
Conversation
jacobshandling
changed the title
TooltipWrapper tooltips on the bottom
| @@ -48,7 +48,6 @@ export const generateSolutionsTableHeaders = ( | |||
| Header: (): JSX.Element => { | |||
| const titleWithToolTip = ( | |||
| <TooltipWrapper | |||
| position="top-start" | |||
There was a problem hiding this comment.
@rachaelshaw I thought design wanted all table headers to have tooltips above the table (current behavior, see screenshot). Are we changing table header tooltips to be below the table header?
Screenshot of current behavior:
There was a problem hiding this comment.
Also, why move tooltips to below for form fields? Doesn't that obscure the field and make it difficult for an end user to click into the field and start typing.
There was a problem hiding this comment.
@gillespi314 that's my opinion too
This is @rachaelshaw 's response
Which I distinctly remember a conversation having them above the table headers so they don't block the table, but now I see the comment to move all tooltips below
There was a problem hiding this comment.
@gillespi314 that's a problem with tooltips in form fields no matter the placement (if it's above, it covers the field above; people don't always fill things out in order).
I think I'm going to make a feature request for an alternative, because I'm not a huge fan of using tooltips as help text and tbh I'm getting tired of debating which form content we should cover up; I don't think we should obscure any of the form, and you should be able to see the help text at the same time you fill out the field.
There was a problem hiding this comment.
Oh well. For me, tooltips below the element are more disruptive to the reader's flow when scanning down the page. C'est la vie.
| @@ -56,10 +56,7 @@ export const generateStatusTableHeaders = (teamId?: number): IDataColumn[] => [ | |||
| !MDM_STATUS_TOOLTIP[status] ? ( | |||
| <TextCell value={status} /> | |||
| ) : ( | |||
| <TooltipWrapper | |||
| position="top-start" | |||
There was a problem hiding this comment.
Same question for product as below
| @@ -61,7 +61,6 @@ const SoftwareVulnSummary = ({ | |||
| <TooltipWrapper | |||
| tipContent="The worst case impact across different environments (CVSS base score). This data is reported by the National Vulnerability Database (NVD)." | |||
| // to match neighboring tooltip wrapper | |||
| position="top-start" | |||
There was a problem hiding this comment.
@rachaelshaw qq: Are we changing these to be below as well? I thought the ticket only said for form fields? (see current behavior recording)
Current behavior:
Screen.Recording.2024-05-15.at.10.20.35.AM.mov
There was a problem hiding this comment.
@rachaelshaw @jacobshandling This PR places various tooltips to the bottom (including some table headers and data set headers) instead of just form fields tooltips. If that's the confirmed product decision, the Issue should be updated as such, but as of right now there's a mismatch with the issue description and the PR changes.
Addresses #18741
changes/,