@trail-ui/react
Version:
57 lines (55 loc) • 1.58 kB
JavaScript
// src/tooltip/tooltip.tsx
import { clsx } from "@trail-ui/shared-utils";
import { popover } from "@trail-ui/theme";
import { useMemo } from "react";
import {
Tooltip as AriaTooltip,
TooltipTrigger as AriaTooltipTrigger,
OverlayArrow
} from "react-aria-components";
import { jsx, jsxs } from "react/jsx-runtime";
function Tooltip(props) {
const {
children,
showArrow = false,
offset = 8,
placement = "top",
color,
size,
radius,
shadow,
classNames,
className,
...otherProps
} = props;
const slots = useMemo(
() => popover({ color, size, radius, shadow }),
[color, size, radius, shadow]
);
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
const arrowContent = useMemo(() => {
if (!showArrow)
return null;
return /* @__PURE__ */ jsx(OverlayArrow, { className: slots.arrow({ class: classNames == null ? void 0 : classNames.arrow }), children: /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L6 6 L12 0" }) }) });
}, [classNames == null ? void 0 : classNames.arrow, showArrow, slots]);
return /* @__PURE__ */ jsxs(
AriaTooltip,
{
offset,
placement,
...otherProps,
className: slots.base({ class: baseStyles }),
children: [
arrowContent,
children
]
}
);
}
function TooltipTrigger(props) {
return /* @__PURE__ */ jsx(AriaTooltipTrigger, { delay: 200, closeDelay: 400, ...props });
}
export {
Tooltip,
TooltipTrigger
};