diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
index 8944d40e0b4b..87b50fb01048 100644
--- a/src-docs/src/views/combo_box/combo_box_example.js
+++ b/src-docs/src/views/combo_box/combo_box_example.js
@@ -83,6 +83,26 @@ const renderOptionSnippet = ``;
+import ToolTips from './tool_tips';
+const toolTipsSource = require('!!raw-loader!./tool_tips');
+const toolTipsSnippet = ``;
+
import Truncation from './truncation';
const truncationSource = require('!!raw-loader!./truncation');
const truncationSnippet = `
+ You can add tooltips to the options by passing{' '}
+ toolTipContent. Use toolTipProps{' '}
+ to pass additional EuiToolTipProps to the tooltip.
+
+ ),
+ props: { EuiComboBox, EuiComboBoxOptionOption },
+ snippet: toolTipsSnippet,
+ demo: ,
+ },
{
title: 'Truncation',
source: [
diff --git a/src-docs/src/views/combo_box/tool_tips.js b/src-docs/src/views/combo_box/tool_tips.js
new file mode 100644
index 000000000000..fa2f3aec2b7f
--- /dev/null
+++ b/src-docs/src/views/combo_box/tool_tips.js
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+
+import { EuiComboBox } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
+
+const optionsStatic = [
+ {
+ label: 'Titan',
+ 'data-test-subj': 'titanOption',
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label: 'Enceladus is disabled',
+ disabled: true,
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label: 'Mimas',
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label: 'Dione',
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label: 'Iapetus',
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label: 'Phoebe',
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label: 'Rhea',
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label:
+ "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label: 'Tethys',
+ toolTipContent: 'Lorem ipsum',
+ },
+ {
+ label: 'Hyperion',
+ toolTipContent: 'Lorem ipsum',
+ },
+];
+export default () => {
+ const [options, setOptions] = useState(optionsStatic);
+ const [selectedOptions, setSelected] = useState([options[2], options[4]]);
+
+ const onChange = (selectedOptions) => {
+ setSelected(selectedOptions);
+ };
+
+ const onCreateOption = (searchValue, flattenedOptions = []) => {
+ const normalizedSearchValue = searchValue.trim().toLowerCase();
+
+ if (!normalizedSearchValue) {
+ return;
+ }
+
+ const newOption = {
+ label: searchValue,
+ };
+
+ // Create the option if it doesn't exist.
+ if (
+ flattenedOptions.findIndex(
+ (option) => option.label.trim().toLowerCase() === normalizedSearchValue
+ ) === -1
+ ) {
+ setOptions([...options, newOption]);
+ }
+
+ // Select the option.
+ setSelected([...selectedOptions, newOption]);
+ };
+
+ return (
+ /* DisplayToggles wrapper for Docs only */
+
+
+
+ );
+};