diff --git a/changelogs/upcoming/7461.md b/changelogs/upcoming/7461.md index 97c718cd26cc..826fa6edcbb5 100644 --- a/changelogs/upcoming/7461.md +++ b/changelogs/upcoming/7461.md @@ -1,2 +1 @@ -- Added support for showing `EuiTooltip` components on `EuiButtonGroup` buttons - +- Added the following properties to `EuiButtonGroup`'s `options` configs: `toolTipContent`, `toolTipProps`, and `title`. These new properties allow wrapping buttons in `EuiToolTips`, and additionally customizing or disabling the native browser `title` tooltip. diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index 0b2e80d1920c..ae68720535ba 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -675,7 +675,7 @@ export const ButtonExample = { ], text: ( <> -

Icon only button groups

+

Icon only button groups

If you're just displaying a group of icons, add the prop{' '} isIconOnly. @@ -694,10 +694,9 @@ export const ButtonExample = { code: buttonGroupCompressedSource, }, ], - text: ( <> -

Button groups in forms

+

Button groups in forms

When using button groups within compressed forms, match the form elements by adding {'buttonSize="compressed"'}. @@ -726,29 +725,30 @@ export const ButtonExample = { code: buttonGroupToolTipsSource, }, ], - text: ( <> -

Button group tooltips

-

- Buttons within a button group will automatically get a{' '} - title attribute containing the button{' '} - label, which displays a default browser tooltip. -

+

Button group tooltips

- To instead display an EuiToolTip containing - custom content, you can add a toolTipContent prop - to the button options. + Buttons within a button group will automatically display a default + browser tooltip containing the button label text. + This can be customized or unset via the title{' '} + property in your options button configuration.

- You can also use toolTipProps to customize - tooltip placement, title, and other behaviors. + To instead display an EuiToolTip around your + button(s), pass the toolTipContent property. You + can also use toolTipProps to customize tooltip + placement, title, and any other prop that{' '} + + EuiToolTip + {' '} + accepts.

), demo: , snippet: buttonGroupToolTipsSnippet, - props: { EuiButtonGroup, EuiButtonGroupOptionProps }, + props: { EuiButtonGroupOptionProps }, }, ], guidelines: ,