Подсказка из @radix-ui/react-tooltip не установлен при использовании Tailwind-Animate ⇐ CSS

[Anonymous]

Я использую @Radix-UI/React-tooltip библиотека в React, чтобы создать компонент подсказки. Когда я использую библиотеку Tailwind-Animate , всплывающее окно подсказки не исчезает после того, как курсор уходит от кнопки триггера (всплывающее окно, кажется, не будет отстранено). Если я переведу тот же код анимации на необработанные CSS, он работает нормально. Что может быть проблемой с аниматом Tailwind? Версия Animate Animate составляет 0.2.10, а версия Tailwindcss-4.1.11. < /P>
Вот обертка, которую я использую в качестве содержимого подъема инструментов (появляется в качестве всплывающего окна, когда курсор колеблется над кнопкой триггера: < /p>
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { twMerge } from 'tailwind-merge';
import { Caption, SmallerText } from '../Typography';
import { TooltipProps } from './types';
import { tooltipContentBaseStyles } from './styles';
import { FontWeight } from '../../../constants/stringConstants';

const Tooltip = TooltipPrimitive.Root;
const TooltipProvider = TooltipPrimitive.Provider;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipArrow = TooltipPrimitive.Arrow;

type TooltipContentProps = React.ComponentPropsWithoutRef<
typeof TooltipPrimitive.Content
> &
Omit;

const TooltipContent = React.forwardRef<
React.ElementRef,
TooltipContentProps
>((props, ref) => {
const {
className,
title,
description,
side,
align,
children,
hasPointer,
sideOffset = 4,
alignOffset = -20,
...restProps
} = props;

const tooltipContentClassNames = twMerge(
tooltipContentBaseStyles,
'rounded-[8px] shadow-lg',
'bg-white dark:bg-primary-gray-900',
'text-black dark:text-white',
className,
);

const tooltipContentContainerClassNames = twMerge(
'max-w-[320px] flex flex-col plr-[2px] ptb-[8px]',
'rounded-[8px]',
'gap-[4px]',
);

const tooltipArrowClassNames = twMerge(
'text z-20 fill-gray-700 text-gray-700',
'fill-white dark:fill-primary-gray-900',
);

return (






{children}

{hasPointer && (

)}

);
});

TooltipContent.displayName = TooltipPrimitive.Content.displayName;

export {
Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
TooltipArrow,
};
< /code>
Код для Tooltipcontentbasestyles (приведенные ниже классы анимации вызывает проблему, когда я перевожу их в необработанные CSS и применяю CSS в контент для подъема инструментов, он работает нормально): < /p>
export const tooltipContentBaseStyles = twMerge(
'z-50 overflow-hidden',
'px-3 py-1.5 text-sm',
'animate-in fade-in-0 zoom-in-95',
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
'data-[side=bottom]:slide-in-from-top-2',
'data-[side=left]:slide-in-from-right-2',
'data-[side=right]:slide-in-from-left-2',
'data-[side=top]:slide-in-from-bottom-2',
);


Подробнее здесь: https://stackoverflow.com/questions/797 ... nd-animate