@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
41 lines • 2.52 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import * as Popover from '@radix-ui/react-popover';
import { useMediaQuery } from 'usehooks-ts';
import Box from './Box.js';
import { cva } from '@reservoir0x/relay-design-system/css';
const TooltipArrowStyle = cva({
base: {
fill: 'modal-background'
}
});
const PopoverArrow = cva({
base: {
fill: 'modal-background'
}
});
const Tooltip = ({ children, content, open, defaultOpen, onOpenChange, asChild = false, ...props }) => {
const isSmallDevice = useMediaQuery('(max-width: 600px)');
if (isSmallDevice) {
return (_jsxs(Popover.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(Popover.Trigger, { asChild: asChild, children: children }), _jsxs(Popover.Content, { sideOffset: 2, side: "bottom", align: "center", style: { zIndex: 100, outline: 'none', maxWidth: '100vw' }, ...props, children: [_jsx(Popover.Arrow, { className: PopoverArrow() }), _jsx(Box, { css: {
zIndex: 9999,
boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
borderRadius: 8,
overflow: 'hidden'
}, children: _jsx(Box, { css: {
background: 'modal-background',
p: '2'
}, children: content }) })] })] }));
}
return (_jsx(TooltipPrimitive.Provider, { children: _jsxs(TooltipPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, delayDuration: 250, children: [_jsx(TooltipPrimitive.Trigger, { asChild: asChild, children: children }), _jsxs(TooltipPrimitive.Content, { sideOffset: 2, side: "bottom", align: "center", style: { zIndex: 100 }, ...props, children: [_jsx("div", { className: TooltipArrowStyle() }), _jsx(Box, { css: {
zIndex: 9999,
boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
borderRadius: 8,
overflow: 'hidden'
}, children: _jsx(Box, { css: {
background: 'modal-background',
p: '2'
}, children: content }) })] })] }) }));
};
export default Tooltip;
//# sourceMappingURL=Tooltip.js.map