diff --git a/src/components/button/button_group/button_group.stories.tsx b/src/components/button/button_group/button_group.stories.tsx
index b96d0ecfdcb..8e3e9a4d8d0 100644
--- a/src/components/button/button_group/button_group.stories.tsx
+++ b/src/components/button/button_group/button_group.stories.tsx
@@ -6,11 +6,10 @@
* Side Public License, v 1.
*/
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { disableStorybookControls } from '../../../../.storybook/utils';
-import { useEuiTheme } from '../../../services';
import {
EuiButtonGroup,
EuiButtonGroupProps,
@@ -125,37 +124,7 @@ export const MultiSelection: Story = {
};
export const WithTooltips: Story = {
- render: function Render({ options, ...args }: EuiButtonGroupProps) {
- const { euiTheme } = useEuiTheme();
- const [toolTipHidden, forceToolTipHidden] = useState(false);
- const forceHiddenToolTip = useCallback(() => forceToolTipHidden(true), []);
- const resetVisibility = useCallback(() => forceToolTipHidden(false), []);
-
- if (options[2].toolTipProps) {
- options[2].toolTipProps = {
- ...options[2].toolTipProps,
- // Example of how a consumer could force hiding the tooltip
- // via `toolTipProps`, state, and custom CSS
- anchorProps: {
- onClick: forceHiddenToolTip,
- onBlurCapture: resetVisibility,
- onMouseEnter: resetVisibility,
- onMouseLeave: forceHiddenToolTip,
- },
- css: [
- {
- transition: `opacity ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`,
- animationFillMode: 'none !important',
- },
- toolTipHidden
- ? { opacity: '0 !important', pointerEvents: 'none' }
- : { opacity: '1' },
- ],
- };
- }
-
- return ;
- },
+ render: ({ ...args }) => ,
args: {
legend: 'EuiButtonGroup - tooltip UI testing',
isIconOnly: true, // Start example with icons to demonstrate usefulness of tooltips
@@ -175,9 +144,10 @@ export const WithTooltips: Story = {
id: 'customToolTipProps',
iconType: 'securitySignalDetected',
label: 'Custom tooltip',
- toolTipContent: 'Custom tooltip position and click behavior',
+ toolTipContent: 'Custom tooltip position and delay',
toolTipProps: {
position: 'right',
+ delay: 'regular',
title: 'Hello world',
},
// Consumers could also opt to hide titles if preferred