[EuiButtonGroup] Add support for EuiToolTip for button tooltips

changelogs/upcoming/7461.md

@@ -0,0 +1,2 @@
+- Added support for showing `EuiTooltip` components on `EuiButtonGroup` buttons
+

src-docs/src/views/button/button_example.js

@@ -236,6 +236,28 @@ const buttonGroupCompressedSnippet = [
 />`,
 ];
 
+import ButtonGroupToolTips from './button_group_tooltips';
+const buttonGroupToolTipsSource = require('!!raw-loader!./button_group_tooltips');
+const buttonGroupToolTipsSnippet = [
+  `<EuiButtonGroup
+  legend={legend}
+  options={[
+    {
+      id,
+      label,
+      toolTipContent,
+      toolTipProps: {
+        title,
+        delay,
+        position,
+      },
+    },
+  ]}
+  idSelected={idSelected}
+  onChange={(optionId) => {}}
+/>`,
+];
+
 export const ButtonExample = {
   title: 'Button',
   intro: (
@@ -697,6 +719,37 @@ export const ButtonExample = {
       props: { EuiButtonGroup, EuiButtonGroupOptionProps },
       demoPanelProps: { color: 'subdued' },
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: buttonGroupToolTipsSource,
+        },
+      ],
+
+      text: (
+        <>
+          <h3>Button group tooltips</h3>
+          <p>
+            Buttons within a button group will automatically get a{' '}
+            <EuiCode>title</EuiCode> attribute containing the button{' '}
+            <EuiCode>label</EuiCode>, which displays a default browser tooltip.
+          </p>
+          <p>
+            To instead display an <EuiCode>EuiToolTip</EuiCode> containing
+            custom content, you can add a <EuiCode>toolTipContent</EuiCode> prop
+            to the button options.
+          </p>
+          <p>
+            You can also use <EuiCode>toolTipProps</EuiCode> to customize
+            tooltip placement, title, and other behaviors.
+          </p>
+        </>
+      ),
+      demo: <ButtonGroupToolTips />,
+      snippet: buttonGroupToolTipsSnippet,
+      props: { EuiButtonGroup, EuiButtonGroupOptionProps },
+    },
   ],
   guidelines: <Guidelines />,
 };

src-docs/src/views/button/button_group_tooltips.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import { EuiButtonGroup } from '../../../../src/components';
+
+export default () => {
+  const toggleButtons = [
+    {
+      id: 'buttonGroup__0',
+      label: 'Default title',
+    },
+    {
+      id: 'buttonGroup__1',
+      label: 'Custom tooltip content',
+      toolTipContent: 'This is a custom tooltip',
+    },
+    {
+      id: 'buttonGroup__2',
+      label: 'Custom tooltip props',
+      toolTipContent: 'This is another custom tooltip',
+      toolTipProps: {
+        title: 'My custom title',
+        delay: 'regular',
+        position: 'right',
+      },
+    },
+  ];
+
+  const [toggleIdSelected, setToggleIdSelected] = useState('buttonGroup__1');
+
+  const onChange = (optionId) => {
+    setToggleIdSelected(optionId);
+  };
+
+  return (
+    <EuiButtonGroup
+      legend="This is a group with tooltips"
+      options={toggleButtons}
+      idSelected={toggleIdSelected}
+      onChange={(id) => onChange(id)}
+    />
+  );
+};