Files
games-frontend-js/src/components/ui/tooltip.tsx
T
john-okeefe 4574dfb8f1 feat(theme): migrate to Chakra v3 system with v2 look restoration
- Replace extendTheme/ColorModeScript with createSystem Provider +
  Toaster shims (components/ui, provider, color-mode) and next-themes;
  index.tsx renders Provider, App reads useColorMode from the shim and
  clears both chakra and legacy theme storage keys on preference change
- theme.tsx restores the v2 identity on v3 primitives: v2 gray/blue/
  green/red scales, v2 solid/contrast fills, v2 text-per-size for
  button/input/native-select/tag, v2 input heights, v2 heading scale
  (xl->4xl etc), v2 switch track/thumb, brighter link underlines
  (currentColor/60), +1px tag top padding, 17px body base font
- Default new-user theme light -> dark to match the established dark UI
- App.test rewritten around Provider + MemoryRouter + Home (old CRA
  'learn react' assertion no longer applies)
2026-09-06 10:29:04 -04:00

47 lines
1.2 KiB
TypeScript

import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
import * as React from "react"
export interface TooltipProps extends ChakraTooltip.RootProps {
showArrow?: boolean
portalled?: boolean
portalRef?: React.RefObject<HTMLElement | null>
content: React.ReactNode
contentProps?: ChakraTooltip.ContentProps
disabled?: boolean
}
export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
function Tooltip(props, ref) {
const {
showArrow,
children,
disabled,
portalled = true,
content,
contentProps,
portalRef,
...rest
} = props
if (disabled) return children
return (
<ChakraTooltip.Root {...rest}>
<ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
<Portal disabled={!portalled} container={portalRef}>
<ChakraTooltip.Positioner>
<ChakraTooltip.Content ref={ref} {...contentProps}>
{showArrow && (
<ChakraTooltip.Arrow>
<ChakraTooltip.ArrowTip />
</ChakraTooltip.Arrow>
)}
{content}
</ChakraTooltip.Content>
</ChakraTooltip.Positioner>
</Portal>
</ChakraTooltip.Root>
)
},
)