Feat : Introduced Delay Options for Tooltip (#5766)

Fixes https://github.com/twentyhq/twenty/issues/5727

---------

Co-authored-by: Rushikesh Tarapure <rushikeshtarapure@gofynd.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Rushikesh Tarapure
2024-06-19 20:07:44 +05:30
committed by GitHub
parent 86f95c0870
commit bc8c895b0e
8 changed files with 98 additions and 88 deletions

View File

@ -1,8 +1,7 @@
import React, { ReactElement, useContext } from 'react';
import { Tooltip } from 'react-tooltip';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { AppTooltip, IconComponent } from 'twenty-ui';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
@ -55,17 +54,6 @@ const StyledInlineCellBaseContainer = styled.div`
user-select: none;
`;
const StyledTooltip = styled(Tooltip)`
background-color: ${({ theme }) => theme.background.primary};
box-shadow: ${({ theme }) => theme.boxShadow.light};
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
padding: ${({ theme }) => theme.spacing(2)};
`;
export const StyledSkeletonDiv = styled.div`
height: 24px;
`;
@ -141,7 +129,7 @@ export const RecordInlineCellContainer = ({
)}
{/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */}
{!showLabel && !fieldDefinition?.disableTooltip && (
<StyledTooltip
<AppTooltip
anchorSelect={`#${labelId}`}
content={label}
clickable