feat(EuiComboBox): add EuiToolTip support on option

elastic · Apr 18, 2024 · 7285464 · 7285464
1 parent b181317
commit 7285464
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/src/components/combo_box/types.ts b/src/components/combo_box/types.ts
@@ -10,6 +10,7 @@ import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { CommonProps } from '../common';
 
 import type { _EuiComboBoxProps } from './combo_box';
+import { EuiToolTipProps } from '../tool_tip';
 
 // note similarity to `Option` in `components/selectable/types.tsx`
 export interface EuiComboBoxOptionOption<
@@ -24,6 +25,14 @@ export interface EuiComboBoxOptionOption<
   prepend?: ReactNode;
   append?: ReactNode;
   truncationProps?: _EuiComboBoxProps<T>['truncationProps'];
+  /**
+   * 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'>>;
 }
 
 export type OptionHandler<T> = (option: EuiComboBoxOptionOption<T>) => void;

diff --git a/src/components/filter_group/filter_select_item.tsx b/src/components/filter_group/filter_select_item.tsx
@@ -13,6 +13,7 @@ import { withEuiTheme, WithEuiThemeProps } from '../../services';
 import { CommonProps } from '../common';
 
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiToolTip, EuiToolTipProps } from '../tool_tip';
 import { EuiIcon } from '../icon';
 
 import { euiFilterSelectItemStyles } from './filter_select_item.styles';
@@ -24,6 +25,14 @@ export interface EuiFilterSelectItemProps
   checked?: FilterChecked;
   showIcons?: boolean;
   isFocused?: boolean;
+  /**
+   * 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'>>;
 }
 
 const resolveIconAndColor = (checked?: FilterChecked) => {
@@ -79,6 +88,9 @@ export class EuiFilterSelectItemClass extends Component<
       checked,
       isFocused,
       showIcons,
+      toolTipContent,
+      toolTipProps,
+      style,
       ...rest
     } = this.props;
 
@@ -90,6 +102,9 @@ export class EuiFilterSelectItemClass extends Component<
 
     const classes = classNames('euiFilterSelectItem', className);
 
+    const hasToolTip =
+      !disabled && React.isValidElement(children) && toolTipContent;
+
     let iconNode;
     if (showIcons) {
       const { icon, color } = resolveIconAndColor(checked);
@@ -100,7 +115,7 @@ export class EuiFilterSelectItemClass extends Component<
       );
     }
 
-    return (
+    const optionItem = (
       <button
         ref={(ref) => (this.buttonRef = ref)}
         role="option"
@@ -110,6 +125,7 @@ export class EuiFilterSelectItemClass extends Component<
         css={cssStyles}
         disabled={disabled}
         aria-disabled={disabled}
+        style={!hasToolTip ? style : undefined}
         {...rest}
       >
         <EuiFlexGroup
@@ -128,6 +144,23 @@ export class EuiFilterSelectItemClass extends Component<
         </EuiFlexGroup>
       </button>
     );
+
+    return hasToolTip ? (
+      // This extra wrapper is needed to ensure that the tooltip has a correct context
+      // for positioning while also ensuring to wrap the interactive option
+      <span style={style}>
+        <EuiToolTip
+          display="block"
+          content={toolTipContent}
+          {...toolTipProps}
+          isOpen={isFocused}
+        >
+          {optionItem}
+        </EuiToolTip>
+      </span>
+    ) : (
+      optionItem
+    );
   }
 }