38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import * as Tooltip from '@radix-ui/react-tooltip';
|
|
import type { ReactElement } from 'react';
|
|
|
|
type NavTooltipProps = {
|
|
label: string;
|
|
children: ReactElement;
|
|
/** 窄轨叶子项可设 0，与原先即时提示接近 */
|
|
delayDuration?: number;
|
|
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
};
|
|
|
|
/**
|
|
* 侧栏图标/收起态等：替代原生 `title`，统一键盘可达与延时（受全局 TooltipProvider 影响可被 Root 覆盖）。
|
|
*/
|
|
export function NavTooltip({ label, children, delayDuration = 300, side = 'right' }: NavTooltipProps) {
|
|
if (!label.trim()) {
|
|
return children;
|
|
}
|
|
|
|
return (
|
|
<Tooltip.Root delayDuration={delayDuration}>
|
|
<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content
|
|
side={side}
|
|
sideOffset={6}
|
|
className="z-[300] max-w-[min(280px,calc(100vw-16px))] rounded-md bg-neutral-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-lg"
|
|
>
|
|
{label}
|
|
<Tooltip.Arrow className="fill-neutral-900" />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
);
|
|
}
|