diff --git a/libraries/core-react/stories/components/Tooltip.stories.tsx b/libraries/core-react/stories/components/Tooltip.stories.tsx index 3ee614f59d..db831e4706 100644 --- a/libraries/core-react/stories/components/Tooltip.stories.tsx +++ b/libraries/core-react/stories/components/Tooltip.stories.tsx @@ -1,10 +1,19 @@ import React, { useState, useRef } from 'react' import styled from 'styled-components' -import { Tooltip, TooltipProps, Typography, Button, Table } from '@components' +import { + Tooltip, + TooltipProps, + Typography, + Button, + Table, + Icon, +} from '@components' import { data, columns } from './helpers/data' import { toCellValues } from './helpers/toCellValues' import { Story, Meta } from '@storybook/react' +import { chrome, explore } from '@equinor/eds-icons' + const Body = styled.div` margin: 42px; display: grid; @@ -28,7 +37,7 @@ export default { component: Tooltip, argTypes: { title: { - defaultValue: 'Tooltip title', + defaultValue: 'This is the tooltip title', }, }, } as Meta @@ -36,11 +45,16 @@ export default { export const Default: Story = (args) => { const [openState, setOpenState] = useState(false) + let timer: ReturnType + const handleOpen = () => { - setOpenState(true) + timer = setTimeout(() => { + setOpenState(true) + }, 300) } const handleClose = () => { + clearTimeout(timer) setOpenState(false) } @@ -48,16 +62,18 @@ export const Default: Story = (args) => { return (
- + = (args) => { export const WithDisabledElements: Story = () => { const [openState, setOpenState] = useState(null) + let timer: ReturnType = null + const handleOpen = (num: 1 | 2) => { - setOpenState(num) + timer = setTimeout(() => { + setOpenState(num) + }, 300) } const handleClose = () => { + clearTimeout(timer) setOpenState(null) } @@ -102,18 +123,19 @@ export const WithDisabledElements: Story = () => { @@ -123,15 +145,22 @@ export const WithDisabledElements: Story = () => { onPointerLeave={handleClose} aria-describedby="tooltip-disabled-safari" > -
@@ -149,14 +178,19 @@ export const TableCellsWithTooltip: Story = () => { openCell: null, }) + let timer: ReturnType + const handleOpen = (openRow: number, openCell: number) => { - setState({ - openRow, - openCell, - }) + timer = setTimeout(() => { + setState({ + openRow, + openCell, + }) + }, 300) } const handleClose = () => { + clearTimeout(timer) setState({ openRow: null, openCell: null }) } @@ -183,8 +217,10 @@ export const TableCellsWithTooltip: Story = () => { handleOpen(rowIndex, cellIndex)} + onMouseOver={() => handleOpen(rowIndex, cellIndex)} onMouseLeave={handleClose} + onFocus={() => handleOpen(rowIndex, cellIndex)} + onBlur={handleClose} style={{ position: 'relative', display: 'inline-block',