docs(EuiComboBox): add EuiDocs example

src-docs/src/views/combo_box/combo_box_example.js

@@ -83,6 +83,26 @@ const renderOptionSnippet = `<EuiComboBox
   renderOption={renderOption}
 />`;
 
+import ToolTips from './tool_tips';
+const toolTipsSource = require('!!raw-loader!./tool_tips');
+const toolTipsSnippet = `<EuiComboBox
+  aria-label="Accessible screen reader label"
+  placeholder="Select or create options"
+  options={[
+    { 
+      label: 'option 1', 
+      tooltipContent: 'tooltip 1', 
+      tooltipProps: {
+        position: 'bottom'
+        'data-test-subj': 'optionTooltip',
+      }
+    }
+  ]}
+  onChange={onChange}
+  onCreateOption={onCreateOption}
+  isClearable={true}
+/>`;
+
 import Truncation from './truncation';
 const truncationSource = require('!!raw-loader!./truncation');
 const truncationSnippet = `<EuiComboBox
@@ -461,6 +481,25 @@ export const ComboBoxExample = {
         },
       ],
     },
+    {
+      title: 'Tooltips',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: toolTipsSource,
+        },
+      ],
+      text: (
+        <p>
+          You can add tooltips to the options by passing{' '}
+          <EuiCode>toolTipContent</EuiCode>. Use <EuiCode>toolTipProps</EuiCode>{' '}
+          to pass additional <EuiCode>EuiToolTipProps</EuiCode> to the tooltip.
+        </p>
+      ),
+      props: { EuiComboBox, EuiComboBoxOptionOption },
+      snippet: toolTipsSnippet,
+      demo: <ToolTips />,
+    },
     {
       title: 'Truncation',
       source: [

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 */
+    <DisplayToggles canDisabled={false} canReadOnly={false} canIsDisabled>
+      <EuiComboBox
+        aria-label="Accessible screen reader label"
+        placeholder="Select or create options"
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        onCreateOption={onCreateOption}
+        isClearable={true}
+        data-test-subj="demoComboBox"
+        autoFocus
+      />
+    </DisplayToggles>
+  );
+};