Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tooltipContent and tooltipProps support for EuiComboBox and EuiSelectable options #7690

Closed
JasonStoltz opened this issue Apr 16, 2024 · 3 comments · Fixed by #7715
Closed
Assignees

Comments

@JasonStoltz
Copy link
Member

Requested by the Cloud team to replace long description text for roles. They would like to ship this by the end of the month.


See similar existing APIs:

/**
* Optional custom tooltip content for the button
*/
toolTipContent?: EuiToolTipProps['content'];
/**
* Optional props to pass to the underlying **[EuiToolTip](/#/display/tooltip)**
*/
toolTipProps?: Partial<Omit<EuiToolTipProps, 'content' | 'children'>>;

/**
* Required if using a tooltip. Add an optional tooltip on hover
*/
toolTipContent?: ReactNode;
/**
* Optional configuration to pass to the underlying [EuiToolTip](/#/display/tooltip).
* Accepts any prop that EuiToolTip does, except for `content` and `children`.
*/
toolTipProps?: Partial<Omit<EuiToolTipProps, 'content' | 'children'>>;

Tooltips should also be toggled by keyboard "focus" (which isn't true focus in the case of EuiSelectable)

@JasonStoltz
Copy link
Member Author

@cee-chen Do you have more context to link here?

@cee-chen
Copy link
Contributor

Original design that tooltips are intended to replace:

Image

The tooltips replace the non-essential descriptions and will gain back valuable screen real estate.

@cee-chen
Copy link
Contributor

cee-chen commented Apr 16, 2024

Scope of work:

API considerations:

  • API should go on the option object/type, not on the top-level component
  • It should be possible for mixed usage (i.e., some options to have tooltip content and some options to not have tooltips).
  • Please start with adding the new prop to EuiComboBox first (higher priority). EuiSelectable is nice to have and will be needed for [EuiComboBox] Rebuild with EuiSelectable #2841, but can also wait if needed.

UX considerations:

  • Triggering the tooltip on keyboard "focus" is going to require some amount of trickery/workaround as focus is technically on the search input and not on the actual list item. If this is too complicated to do, let's punt it to a separate follow-up PR and focus on mouse functionality first.
  • Default tooltip delay to short and not long, please (per recent conversations with Marcialis)
  • (OPTIONAL) We may want to consider automatically rendering the iInCircle icon if tooltipContent exists and has been passed, to let users know that the content exists. Would be open to thoughts on this or if we should just let users decide this themselves via the append or prepend properties

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants