docs: add EUI docs example

src-docs/src/views/selectable/selectable_example.js

@@ -33,6 +33,9 @@ const selectableExclusionSource = require('!!raw-loader!./selectable_exclusion')
 import SelectableMixed from './selectable_mixed';
 const selectableMixedSource = require('!!raw-loader!./selectable_mixed');
 
+import SelectableToolTips from './selectable_tool_tips';
+const selectableToolTipsSource = require('!!raw-loader!./selectable_tool_tips');
+
 import SelectableMessages from './selectable_messages';
 const selectableMessagesSource = require('!!raw-loader!./selectable_messages');
 
@@ -287,6 +290,42 @@ export const SelectableExample = {
 </EuiSelectable>`,
     },
 
+    {
+      title: 'Options can have tooltips',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: selectableToolTipsSource,
+        },
+      ],
+      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,
+      demo: <SelectableToolTips />,
+      snippet: `<EuiSelectable
+  aria-label="Example supporting mixed (indeterminate) options"
+  options={[
+    {
+      label: '',
+      checked: 'mixed',
+      toolTipContent: 'tooltip 1', 
+      toolTipProps: {
+        position: 'bottom'
+        'data-test-subj': 'optionTooltip',
+      }
+    }
+  ]}
+  onChange={newOptions => setOptions(newOptions)}
+>
+  {list => list}
+</EuiSelectable>`,
+    },
+
     {
       title: 'Messages and loading',
       source: [

src-docs/src/views/selectable/selectable_tool_tips.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+
+import { EuiSelectable, EuiSelectableOption } from '../../../../src';
+
+export default () => {
+  const [options, setOptions] = useState<EuiSelectableOption[]>([
+    {
+      label: 'Titan',
+      'data-test-subj': 'titanOption',
+      toolTipContent: 'Lorem ipsum',
+    },
+    {
+      label: 'Enceladus is disabled',
+      disabled: true,
+      toolTipContent: 'Lorem ipsum',
+    },
+    {
+      label: 'Mimas',
+      checked: 'on',
+      toolTipContent: 'Lorem ipsum',
+    },
+    {
+      label: 'Dione',
+      toolTipContent: 'Lorem ipsum',
+    },
+    {
+      label: 'Iapetus',
+      checked: 'on',
+      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',
+    },
+  ]);
+
+  return (
+    <EuiSelectable
+      aria-label="Basic example"
+      options={options}
+      listProps={{ bordered: true }}
+      onChange={(newOptions) => setOptions(newOptions)}
+    >
+      {(list) => list}
+    </EuiSelectable>
+  );
+};