Skip to content

Commit

Permalink
fix: tooltip animation
Browse files Browse the repository at this point in the history
  • Loading branch information
alstn113 committed May 14, 2023
1 parent 9180e86 commit 64e3924
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 71 deletions.
36 changes: 3 additions & 33 deletions packages/react/src/components/Tooltip/Tooltip.styles.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,29 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { NormalColorType, palette } from '../../theme';
import { TooltipIconPlacement, TooltipPlacement } from './placement';
import { motion } from 'framer-motion';

export const StyledTooltipTrigger = styled.div`
width: max-content;
display: inherit;
`;

export const StyledTooltipArrow = styled.div<{
tooltipIconPlacement: TooltipIconPlacement;
}>`
export const StyledTooltipArrow = styled(motion.div)`
border-radius: 0 0 2px 0;
position: absolute;
width: 12px;
height: 12px;
background-color: #ccc;
opacity: 0;
transition: 0.1s ease-in-out;
${({ tooltipIconPlacement }) => css`
top: ${tooltipIconPlacement.top};
left: ${tooltipIconPlacement.left};
right: ${tooltipIconPlacement.right};
bottom: ${tooltipIconPlacement.bottom};
transform: ${tooltipIconPlacement.transform};
`};
`;

export const StyledTooltipContent = styled.div<{
visible: boolean;
export const StyledTooltipContent = styled(motion.div)<{
color: NormalColorType;
tooltipPlacement: TooltipPlacement;
}>`
position: absolute;
border-radius: 14px;
padding: 8px 12px;
opacity: 0;
transition: 0.1s ease-in-out;
${({ tooltipPlacement }) => css`
top: calc(${tooltipPlacement.top} + 6px);
left: ${tooltipPlacement.left};
transform: ${tooltipPlacement.transform};
`};
${({ visible, tooltipPlacement }) =>
visible &&
css`
opacity: 1;
top: ${tooltipPlacement.top};
${StyledTooltipArrow} {
opacity: 1;
}
`};
${({ color }) => css`
background-color: ${palette[color]};
Expand Down
19 changes: 2 additions & 17 deletions packages/react/src/components/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface TooltipProps {
* </Tooltip>
* ```
*/

export const Tooltip = ({
children,
placement = 'top',
Expand All @@ -30,7 +31,6 @@ export const Tooltip = ({
}: TooltipProps) => {
const ref = useRef<HTMLDivElement>(null);
const [visible, setVisible] = useState(false);
const timer = useRef<number>();

const contentProps = {
placement,
Expand All @@ -41,22 +41,7 @@ export const Tooltip = ({
};

const handleChangeVisible = (nextState: boolean) => {
const clear = () => {
clearTimeout(timer.current);
timer.current = undefined;
};
const handler = (nextState: boolean) => {
setVisible(nextState);
clear();
};

clear();
if (nextState) {
timer.current = window.setTimeout(() => handler(true), 100);

return;
}
timer.current = window.setTimeout(() => handler(false), 100);
setVisible(nextState);
};

return (
Expand Down
71 changes: 50 additions & 21 deletions packages/react/src/components/Tooltip/TooltipContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
getRect,
} from './placement';
import { NormalColorType } from '../../theme';
import { AnimatePresence } from 'framer-motion';

interface TooltipContentProps {
placement?: Placement;
Expand Down Expand Up @@ -54,28 +55,56 @@ export const TooltipContent = ({
if (!el) return null;

return createPortal(
<S.StyledTooltipContent
visible={visible}
tooltipPlacement={{
left: rect.left,
top: rect.top,
transform: rect.transform,
}}
color={color}
>
<S.StyledTooltip>
<S.StyledTooltipArrow
tooltipIconPlacement={{
left,
top,
right,
bottom,
transform,
<AnimatePresence>
{visible && (
<S.StyledTooltipContent
color={color}
initial={{
top: `calc(${rect.top} + 6px)`,
left: rect.left,
transform: rect.transform,
opacity: 0,
}}
/>
{children}
</S.StyledTooltip>
</S.StyledTooltipContent>,
animate={{
opacity: 1,
top: rect.top,
}}
exit={{
top: `calc(${rect.top} + 6px)`,
left: rect.left,
transform: rect.transform,
opacity: 0,
}}
transition={{
duration: 0.2,
ease: 'easeInOut',
}}
>
<S.StyledTooltip>
<S.StyledTooltipArrow
style={{
top,
left,
right,
bottom,
transform,
}}
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
transition={{
duration: 0.2,
ease: 'easeInOut',
}}
/>
{children}
</S.StyledTooltip>
</S.StyledTooltipContent>
)}
</AnimatePresence>,
el,
);
};

0 comments on commit 64e3924

Please sign in to comment.