@szum-tech/design-system
Version:
Szum-Tech design system with tailwindcss support
41 lines (38 loc) • 1.46 kB
JavaScript
import { Tooltip as Tooltip$1 } from 'radix-ui';
import { jsxs, jsx } from 'react/jsx-runtime';
// src/components/tooltip/tooltip.tsx
function Tooltip({
defaultOpen,
content,
open,
onOpenChange,
children,
side,
align,
collisionPadding = 8,
sideOffset = 8,
...props
}) {
return /* @__PURE__ */ jsxs(Tooltip$1.Root, { delayDuration: 0, open, defaultOpen, onOpenChange, children: [
/* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children }),
content ? /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
Tooltip$1.Content,
{
className: "text-body-1 data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade rounded bg-white p-2 text-gray-100 will-change-[transform,opacity] select-none",
sideOffset,
side,
align,
collisionPadding,
...props,
children: [
content,
/* @__PURE__ */ jsx(Tooltip$1.Arrow, { width: 8, height: 4, className: "fill-white" })
]
}
) }) : null
] });
}
function TooltipProvider({ children, skipDelayDuration = 500, ...props }) {
return /* @__PURE__ */ jsx(Tooltip$1.Provider, { skipDelayDuration, ...props, children });
}
export { Tooltip, TooltipProvider };