@lattice-ui/tooltip 0.1.1

package/out/Tooltip/TooltipContent.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TooltipContentProps } from "./types";
+export declare function TooltipContent(props: TooltipContentProps): React.JSX.Element | undefined;

package/out/Tooltip/TooltipContent.luau

@@ -0,0 +1,111 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
+local DismissableLayer = _layer.DismissableLayer
+local Presence = _layer.Presence
+local usePopper = TS.import(script, TS.getModule(script, "@lattice-ui", "popper").out).usePopper
+local useTooltipContext = TS.import(script, script.Parent, "context").useTooltipContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function TooltipContentImpl(props)
+	local tooltipContext = useTooltipContext()
+	local popper = usePopper({
+		anchorRef = tooltipContext.triggerRef,
+		contentRef = tooltipContext.contentRef,
+		placement = props.placement,
+		offset = props.offset,
+		padding = props.padding,
+		enabled = props.enabled,
+	})
+	local setContentRef = React.useCallback(function(instance)
+		tooltipContext.contentRef.current = toGuiObject(instance)
+	end, { tooltipContext.contentRef })
+	if props.asChild then
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[TooltipContent] `asChild` requires a child element.")
+		end
+		return React.createElement(DismissableLayer, {
+			enabled = props.enabled,
+			modal = false,
+			onDismiss = props.onDismiss,
+			onEscapeKeyDown = props.onEscapeKeyDown,
+			onInteractOutside = props.onInteractOutside,
+			onPointerDownOutside = props.onPointerDownOutside,
+		}, React.createElement(Slot, {
+			AnchorPoint = popper.anchorPoint,
+			Position = popper.position,
+			Visible = props.visible,
+			ref = setContentRef,
+		}, child))
+	end
+	return React.createElement(DismissableLayer, {
+		enabled = props.enabled,
+		modal = false,
+		onDismiss = props.onDismiss,
+		onEscapeKeyDown = props.onEscapeKeyDown,
+		onInteractOutside = props.onInteractOutside,
+		onPointerDownOutside = props.onPointerDownOutside,
+	}, React.createElement("frame", {
+		AnchorPoint = popper.anchorPoint,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Position = popper.position,
+		Size = UDim2.fromOffset(0, 0),
+		Visible = props.visible,
+		ref = setContentRef,
+	}, props.children))
+end
+local function TooltipContent(props)
+	local tooltipContext = useTooltipContext()
+	local open = tooltipContext.open
+	local forceMount = props.forceMount == true
+	local handleDismiss = React.useCallback(function()
+		tooltipContext.close()
+	end, { tooltipContext })
+	if not open and not forceMount then
+		return nil
+	end
+	if forceMount then
+		return React.createElement(TooltipContentImpl, {
+			asChild = props.asChild,
+			enabled = open,
+			offset = props.offset,
+			onDismiss = handleDismiss,
+			onEscapeKeyDown = props.onEscapeKeyDown,
+			onInteractOutside = props.onInteractOutside,
+			onPointerDownOutside = props.onPointerDownOutside,
+			padding = props.padding,
+			placement = props.placement,
+			visible = open,
+		}, props.children)
+	end
+	return React.createElement(Presence, {
+		exitFallbackMs = 0,
+		present = open,
+		render = function(state)
+			return React.createElement(TooltipContentImpl, {
+				asChild = props.asChild,
+				enabled = state.isPresent,
+				offset = props.offset,
+				onDismiss = handleDismiss,
+				onEscapeKeyDown = props.onEscapeKeyDown,
+				onInteractOutside = props.onInteractOutside,
+				onPointerDownOutside = props.onPointerDownOutside,
+				padding = props.padding,
+				placement = props.placement,
+				visible = state.isPresent,
+			}, props.children)
+		end,
+	})
+end
+return {
+	TooltipContent = TooltipContent,
+}

package/out/Tooltip/TooltipPortal.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TooltipPortalProps } from "./types";
+export declare function TooltipPortal(props: TooltipPortalProps): React.JSX.Element;

package/out/Tooltip/TooltipPortal.luau

@@ -0,0 +1,33 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
+local Portal = _layer.Portal
+local PortalProvider = _layer.PortalProvider
+local usePortalContext = _layer.usePortalContext
+local function TooltipPortalWithOverrides(props)
+	local portalContext = usePortalContext()
+	local container = props.container or portalContext.container
+	local _condition = props.displayOrderBase
+	if _condition == nil then
+		_condition = portalContext.displayOrderBase
+	end
+	local displayOrderBase = _condition
+	return React.createElement(PortalProvider, {
+		container = container,
+		displayOrderBase = displayOrderBase,
+	}, React.createElement(Portal, nil, props.children))
+end
+local function TooltipPortal(props)
+	local hasOverrides = props.container ~= nil or props.displayOrderBase ~= nil
+	if hasOverrides then
+		return React.createElement(TooltipPortalWithOverrides, {
+			container = props.container,
+			displayOrderBase = props.displayOrderBase,
+		}, props.children)
+	end
+	return React.createElement(Portal, nil, props.children)
+end
+return {
+	TooltipPortal = TooltipPortal,
+}

package/out/Tooltip/TooltipProvider.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TooltipProviderProps } from "./types";
+export declare function TooltipProvider(props: TooltipProviderProps): React.JSX.Element;

package/out/Tooltip/TooltipProvider.luau

@@ -0,0 +1,50 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local TooltipProviderContext = TS.import(script, script.Parent, "context").TooltipProviderContext
+local function TooltipProvider(props)
+	local _condition = props.delayDuration
+	if _condition == nil then
+		_condition = 700
+	end
+	local delayDuration = _condition
+	local _condition_1 = props.skipDelayDuration
+	if _condition_1 == nil then
+		_condition_1 = 300
+	end
+	local skipDelayDuration = _condition_1
+	local lastOpenTimestampRef = React.useRef()
+	local markOpen = React.useCallback(function()
+		lastOpenTimestampRef.current = os.clock()
+	end, {})
+	local resolveOpenDelay = React.useCallback(function(requestedDelay)
+		local _condition_2 = requestedDelay
+		if _condition_2 == nil then
+			_condition_2 = delayDuration
+		end
+		local baseDelay = _condition_2
+		local lastOpenTimestamp = lastOpenTimestampRef.current
+		if lastOpenTimestamp == nil then
+			return baseDelay
+		end
+		local elapsedMs = (os.clock() - lastOpenTimestamp) * 1000
+		if elapsedMs <= skipDelayDuration then
+			return math.min(baseDelay, skipDelayDuration)
+		end
+		return baseDelay
+	end, { delayDuration, skipDelayDuration })
+	local contextValue = React.useMemo(function()
+		return {
+			delayDuration = delayDuration,
+			skipDelayDuration = skipDelayDuration,
+			resolveOpenDelay = resolveOpenDelay,
+			markOpen = markOpen,
+		}
+	end, { delayDuration, markOpen, resolveOpenDelay, skipDelayDuration })
+	return React.createElement(TooltipProviderContext.Provider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	TooltipProvider = TooltipProvider,
+}

package/out/Tooltip/TooltipRoot.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TooltipProps } from "./types";
+export declare function Tooltip(props: TooltipProps): React.JSX.Element;

package/out/Tooltip/TooltipRoot.luau

@@ -0,0 +1,78 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local useControllableState = _core.useControllableState
+local _context = TS.import(script, script.Parent, "context")
+local TooltipContextProvider = _context.TooltipContextProvider
+local useTooltipProviderContext = _context.useTooltipProviderContext
+local function Tooltip(props)
+	local providerContext = useTooltipProviderContext()
+	local _object = {
+		value = props.open,
+	}
+	local _left = "defaultValue"
+	local _condition = props.defaultOpen
+	if _condition == nil then
+		_condition = false
+	end
+	_object[_left] = _condition
+	_object.onChange = props.onOpenChange
+	local _binding = useControllableState(_object)
+	local open = _binding[1]
+	local setOpenState = _binding[2]
+	local triggerRef = React.useRef()
+	local contentRef = React.useRef()
+	local openDelayTaskRef = React.useRef()
+	local cancelPendingOpen = React.useCallback(function()
+		local openDelayTask = openDelayTaskRef.current
+		if not openDelayTask then
+			return nil
+		end
+		task.cancel(openDelayTask)
+		openDelayTaskRef.current = nil
+	end, {})
+	local setOpen = React.useCallback(function(nextOpen)
+		setOpenState(nextOpen)
+		if nextOpen then
+			providerContext.markOpen()
+		end
+	end, { providerContext, setOpenState })
+	local openWithDelay = React.useCallback(function()
+		cancelPendingOpen()
+		local resolvedDelay = providerContext.resolveOpenDelay(props.delayDuration)
+		if resolvedDelay <= 0 then
+			setOpen(true)
+			return nil
+		end
+		openDelayTaskRef.current = task.delay(resolvedDelay / 1000, function()
+			openDelayTaskRef.current = nil
+			setOpen(true)
+		end)
+	end, { cancelPendingOpen, props.delayDuration, providerContext, setOpen })
+	local close = React.useCallback(function()
+		cancelPendingOpen()
+		setOpen(false)
+	end, { cancelPendingOpen, setOpen })
+	React.useEffect(function()
+		return function()
+			cancelPendingOpen()
+		end
+	end, { cancelPendingOpen })
+	local contextValue = React.useMemo(function()
+		return {
+			open = open,
+			setOpen = setOpen,
+			openWithDelay = openWithDelay,
+			close = close,
+			triggerRef = triggerRef,
+			contentRef = contentRef,
+		}
+	end, { close, open, openWithDelay, setOpen })
+	return React.createElement(TooltipContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	Tooltip = Tooltip,
+}

package/out/Tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TooltipTriggerProps } from "./types";
+export declare function TooltipTrigger(props: TooltipTriggerProps): React.JSX.Element;

package/out/Tooltip/TooltipTrigger.luau

@@ -0,0 +1,61 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useTooltipContext = TS.import(script, script.Parent, "context").useTooltipContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function TooltipTrigger(props)
+	local tooltipContext = useTooltipContext()
+	local setTriggerRef = React.useCallback(function(instance)
+		tooltipContext.triggerRef.current = toGuiObject(instance)
+	end, { tooltipContext.triggerRef })
+	local handleOpen = React.useCallback(function()
+		if props.disabled then
+			return nil
+		end
+		tooltipContext.openWithDelay()
+	end, { props.disabled, tooltipContext })
+	local handleClose = React.useCallback(function()
+		tooltipContext.close()
+	end, { tooltipContext })
+	local eventHandlers = React.useMemo(function()
+		return {
+			MouseEnter = handleOpen,
+			MouseLeave = handleClose,
+			SelectionGained = handleOpen,
+			SelectionLost = handleClose,
+		}
+	end, { handleClose, handleOpen })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TooltipTrigger] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Event = eventHandlers,
+			ref = setTriggerRef,
+		}, child)
+	end
+	return React.createElement("textbutton", {
+		Active = props.disabled ~= true,
+		AutoButtonColor = false,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Event = eventHandlers,
+		Selectable = props.disabled ~= true,
+		Size = UDim2.fromOffset(140, 36),
+		Text = "Tooltip Trigger",
+		TextColor3 = Color3.fromRGB(240, 244, 250),
+		TextSize = 15,
+		ref = setTriggerRef,
+	}, props.children)
+end
+return {
+	TooltipTrigger = TooltipTrigger,
+}

package/out/Tooltip/context.d.ts

@@ -0,0 +1,6 @@
+import { React } from "@lattice-ui/core";
+import type { TooltipContextValue, TooltipProviderContextValue } from "./types";
+declare const TooltipContextProvider: React.Provider<TooltipContextValue | undefined>, useTooltipContext: () => TooltipContextValue;
+declare const TooltipProviderContext: React.Context<TooltipProviderContextValue>;
+declare function useTooltipProviderContext(): TooltipProviderContextValue;
+export { TooltipContextProvider, TooltipProviderContext, useTooltipContext, useTooltipProviderContext };

package/out/Tooltip/context.luau

@@ -0,0 +1,32 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local createStrictContext = _core.createStrictContext
+local React = _core.React
+local _binding = createStrictContext("Tooltip")
+local TooltipContextProvider = _binding[1]
+local useTooltipContext = _binding[2]
+local DEFAULT_TOOLTIP_PROVIDER_CONTEXT = {
+	delayDuration = 700,
+	skipDelayDuration = 300,
+	resolveOpenDelay = function(requestedDelay)
+		local _condition = requestedDelay
+		if _condition == nil then
+			_condition = 700
+		end
+		return _condition
+	end,
+	markOpen = function()
+		-- default no-op
+	end,
+}
+local TooltipProviderContext = React.createContext(DEFAULT_TOOLTIP_PROVIDER_CONTEXT)
+local function useTooltipProviderContext()
+	return React.useContext(TooltipProviderContext)
+end
+return {
+	TooltipContextProvider = TooltipContextProvider,
+	TooltipProviderContext = TooltipProviderContext,
+	useTooltipContext = useTooltipContext,
+	useTooltipProviderContext = useTooltipProviderContext,
+}

package/out/Tooltip/types.d.ts

@@ -0,0 +1,51 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type { PopperPlacement } from "@lattice-ui/popper";
+import type React from "@rbxts/react";
+export type TooltipSetOpen = (open: boolean) => void;
+export type TooltipContextValue = {
+    open: boolean;
+    setOpen: TooltipSetOpen;
+    openWithDelay: () => void;
+    close: () => void;
+    triggerRef: React.MutableRefObject<GuiObject | undefined>;
+    contentRef: React.MutableRefObject<GuiObject | undefined>;
+};
+export type TooltipProviderContextValue = {
+    delayDuration: number;
+    skipDelayDuration: number;
+    resolveOpenDelay: (requestedDelay?: number) => number;
+    markOpen: () => void;
+};
+export type TooltipProviderProps = {
+    delayDuration?: number;
+    skipDelayDuration?: number;
+    children?: React.ReactNode;
+};
+export type TooltipProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    delayDuration?: number;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+};
+export type TooltipTriggerProps = {
+    asChild?: boolean;
+    disabled?: boolean;
+    children?: React.ReactElement;
+};
+export type TooltipPortalProps = {
+    container?: BasePlayerGui;
+    displayOrderBase?: number;
+    children?: React.ReactNode;
+};
+export type TooltipContentProps = {
+    asChild?: boolean;
+    forceMount?: boolean;
+    placement?: PopperPlacement;
+    offset?: Vector2;
+    padding?: number;
+    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+    onPointerDownOutside?: (event: LayerInteractEvent) => void;
+    onInteractOutside?: (event: LayerInteractEvent) => void;
+    children?: React.ReactNode;
+};

package/out/Tooltip/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,6 @@
+export { TooltipContent } from "./Tooltip/TooltipContent";
+export { TooltipPortal } from "./Tooltip/TooltipPortal";
+export { TooltipProvider } from "./Tooltip/TooltipProvider";
+export { Tooltip } from "./Tooltip/TooltipRoot";
+export { TooltipTrigger } from "./Tooltip/TooltipTrigger";
+export type { TooltipContentProps, TooltipPortalProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps, } from "./Tooltip/types";

package/out/init.luau

@@ -0,0 +1,9 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.TooltipContent = TS.import(script, script, "Tooltip", "TooltipContent").TooltipContent
+exports.TooltipPortal = TS.import(script, script, "Tooltip", "TooltipPortal").TooltipPortal
+exports.TooltipProvider = TS.import(script, script, "Tooltip", "TooltipProvider").TooltipProvider
+exports.Tooltip = TS.import(script, script, "Tooltip", "TooltipRoot").Tooltip
+exports.TooltipTrigger = TS.import(script, script, "Tooltip", "TooltipTrigger").TooltipTrigger
+return exports

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@lattice-ui/tooltip",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.1.1",
+    "@lattice-ui/layer": "0.1.1",
+    "@lattice-ui/popper": "0.1.1"
+  },
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "watch": "rbxtsc -p tsconfig.json -w",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  }
+}

package/src/Tooltip/TooltipContent.tsx

@@ -0,0 +1,144 @@
+import { React, Slot } from "@lattice-ui/core";
+import { DismissableLayer, Presence } from "@lattice-ui/layer";
+import { usePopper } from "@lattice-ui/popper";
+import { useTooltipContext } from "./context";
+import type { TooltipContentProps } from "./types";
+
+type TooltipContentImplProps = {
+  enabled: boolean;
+  visible: boolean;
+  onDismiss: () => void;
+  asChild?: boolean;
+  placement?: TooltipContentProps["placement"];
+  offset?: TooltipContentProps["offset"];
+  padding?: TooltipContentProps["padding"];
+} & Pick<TooltipContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+function TooltipContentImpl(props: TooltipContentImplProps) {
+  const tooltipContext = useTooltipContext();
+
+  const popper = usePopper({
+    anchorRef: tooltipContext.triggerRef,
+    contentRef: tooltipContext.contentRef,
+    placement: props.placement,
+    offset: props.offset,
+    padding: props.padding,
+    enabled: props.enabled,
+  });
+
+  const setContentRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      tooltipContext.contentRef.current = toGuiObject(instance);
+    },
+    [tooltipContext.contentRef],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[TooltipContent] `asChild` requires a child element.");
+    }
+
+    return (
+      <DismissableLayer
+        enabled={props.enabled}
+        modal={false}
+        onDismiss={props.onDismiss}
+        onEscapeKeyDown={props.onEscapeKeyDown}
+        onInteractOutside={props.onInteractOutside}
+        onPointerDownOutside={props.onPointerDownOutside}
+      >
+        <Slot AnchorPoint={popper.anchorPoint} Position={popper.position} Visible={props.visible} ref={setContentRef}>
+          {child}
+        </Slot>
+      </DismissableLayer>
+    );
+  }
+
+  return (
+    <DismissableLayer
+      enabled={props.enabled}
+      modal={false}
+      onDismiss={props.onDismiss}
+      onEscapeKeyDown={props.onEscapeKeyDown}
+      onInteractOutside={props.onInteractOutside}
+      onPointerDownOutside={props.onPointerDownOutside}
+    >
+      <frame
+        AnchorPoint={popper.anchorPoint}
+        BackgroundTransparency={1}
+        BorderSizePixel={0}
+        Position={popper.position}
+        Size={UDim2.fromOffset(0, 0)}
+        Visible={props.visible}
+        ref={setContentRef}
+      >
+        {props.children}
+      </frame>
+    </DismissableLayer>
+  );
+}
+
+export function TooltipContent(props: TooltipContentProps) {
+  const tooltipContext = useTooltipContext();
+  const open = tooltipContext.open;
+  const forceMount = props.forceMount === true;
+
+  const handleDismiss = React.useCallback(() => {
+    tooltipContext.close();
+  }, [tooltipContext]);
+
+  if (!open && !forceMount) {
+    return undefined;
+  }
+
+  if (forceMount) {
+    return (
+      <TooltipContentImpl
+        asChild={props.asChild}
+        enabled={open}
+        offset={props.offset}
+        onDismiss={handleDismiss}
+        onEscapeKeyDown={props.onEscapeKeyDown}
+        onInteractOutside={props.onInteractOutside}
+        onPointerDownOutside={props.onPointerDownOutside}
+        padding={props.padding}
+        placement={props.placement}
+        visible={open}
+      >
+        {props.children}
+      </TooltipContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      exitFallbackMs={0}
+      present={open}
+      render={(state) => (
+        <TooltipContentImpl
+          asChild={props.asChild}
+          enabled={state.isPresent}
+          offset={props.offset}
+          onDismiss={handleDismiss}
+          onEscapeKeyDown={props.onEscapeKeyDown}
+          onInteractOutside={props.onInteractOutside}
+          onPointerDownOutside={props.onPointerDownOutside}
+          padding={props.padding}
+          placement={props.placement}
+          visible={state.isPresent}
+        >
+          {props.children}
+        </TooltipContentImpl>
+      )}
+    />
+  );
+}

package/src/Tooltip/TooltipPortal.tsx

@@ -0,0 +1,28 @@
+import { React } from "@lattice-ui/core";
+import { Portal, PortalProvider, usePortalContext } from "@lattice-ui/layer";
+import type { TooltipPortalProps } from "./types";
+
+function TooltipPortalWithOverrides(props: TooltipPortalProps) {
+  const portalContext = usePortalContext();
+  const container = props.container ?? portalContext.container;
+  const displayOrderBase = props.displayOrderBase ?? portalContext.displayOrderBase;
+
+  return (
+    <PortalProvider container={container} displayOrderBase={displayOrderBase}>
+      <Portal>{props.children}</Portal>
+    </PortalProvider>
+  );
+}
+
+export function TooltipPortal(props: TooltipPortalProps) {
+  const hasOverrides = props.container !== undefined || props.displayOrderBase !== undefined;
+  if (hasOverrides) {
+    return (
+      <TooltipPortalWithOverrides container={props.container} displayOrderBase={props.displayOrderBase}>
+        {props.children}
+      </TooltipPortalWithOverrides>
+    );
+  }
+
+  return <Portal>{props.children}</Portal>;
+}

package/src/Tooltip/TooltipProvider.tsx

@@ -0,0 +1,43 @@
+import { React } from "@lattice-ui/core";
+import { TooltipProviderContext } from "./context";
+import type { TooltipProviderContextValue, TooltipProviderProps } from "./types";
+
+export function TooltipProvider(props: TooltipProviderProps) {
+  const delayDuration = props.delayDuration ?? 700;
+  const skipDelayDuration = props.skipDelayDuration ?? 300;
+  const lastOpenTimestampRef = React.useRef<number>();
+
+  const markOpen = React.useCallback(() => {
+    lastOpenTimestampRef.current = os.clock();
+  }, []);
+
+  const resolveOpenDelay = React.useCallback(
+    (requestedDelay?: number) => {
+      const baseDelay = requestedDelay ?? delayDuration;
+      const lastOpenTimestamp = lastOpenTimestampRef.current;
+      if (lastOpenTimestamp === undefined) {
+        return baseDelay;
+      }
+
+      const elapsedMs = (os.clock() - lastOpenTimestamp) * 1000;
+      if (elapsedMs <= skipDelayDuration) {
+        return math.min(baseDelay, skipDelayDuration);
+      }
+
+      return baseDelay;
+    },
+    [delayDuration, skipDelayDuration],
+  );
+
+  const contextValue = React.useMemo<TooltipProviderContextValue>(
+    () => ({
+      delayDuration,
+      skipDelayDuration,
+      resolveOpenDelay,
+      markOpen,
+    }),
+    [delayDuration, markOpen, resolveOpenDelay, skipDelayDuration],
+  );
+
+  return <TooltipProviderContext.Provider value={contextValue}>{props.children}</TooltipProviderContext.Provider>;
+}

package/src/Tooltip/TooltipRoot.tsx

@@ -0,0 +1,76 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { TooltipContextProvider, useTooltipProviderContext } from "./context";
+import type { TooltipProps } from "./types";
+
+export function Tooltip(props: TooltipProps) {
+  const providerContext = useTooltipProviderContext();
+  const [open, setOpenState] = useControllableState<boolean>({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange,
+  });
+
+  const triggerRef = React.useRef<GuiObject>();
+  const contentRef = React.useRef<GuiObject>();
+  const openDelayTaskRef = React.useRef<thread>();
+
+  const cancelPendingOpen = React.useCallback(() => {
+    const openDelayTask = openDelayTaskRef.current;
+    if (!openDelayTask) {
+      return;
+    }
+
+    task.cancel(openDelayTask);
+    openDelayTaskRef.current = undefined;
+  }, []);
+
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      setOpenState(nextOpen);
+      if (nextOpen) {
+        providerContext.markOpen();
+      }
+    },
+    [providerContext, setOpenState],
+  );
+
+  const openWithDelay = React.useCallback(() => {
+    cancelPendingOpen();
+
+    const resolvedDelay = providerContext.resolveOpenDelay(props.delayDuration);
+    if (resolvedDelay <= 0) {
+      setOpen(true);
+      return;
+    }
+
+    openDelayTaskRef.current = task.delay(resolvedDelay / 1000, () => {
+      openDelayTaskRef.current = undefined;
+      setOpen(true);
+    });
+  }, [cancelPendingOpen, props.delayDuration, providerContext, setOpen]);
+
+  const close = React.useCallback(() => {
+    cancelPendingOpen();
+    setOpen(false);
+  }, [cancelPendingOpen, setOpen]);
+
+  React.useEffect(() => {
+    return () => {
+      cancelPendingOpen();
+    };
+  }, [cancelPendingOpen]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      openWithDelay,
+      close,
+      triggerRef,
+      contentRef,
+    }),
+    [close, open, openWithDelay, setOpen],
+  );
+
+  return <TooltipContextProvider value={contextValue}>{props.children}</TooltipContextProvider>;
+}

package/src/Tooltip/TooltipTrigger.tsx

@@ -0,0 +1,75 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useTooltipContext } from "./context";
+import type { TooltipTriggerProps } from "./types";
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function TooltipTrigger(props: TooltipTriggerProps) {
+  const tooltipContext = useTooltipContext();
+
+  const setTriggerRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      tooltipContext.triggerRef.current = toGuiObject(instance);
+    },
+    [tooltipContext.triggerRef],
+  );
+
+  const handleOpen = React.useCallback(() => {
+    if (props.disabled) {
+      return;
+    }
+
+    tooltipContext.openWithDelay();
+  }, [props.disabled, tooltipContext]);
+
+  const handleClose = React.useCallback(() => {
+    tooltipContext.close();
+  }, [tooltipContext]);
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      MouseEnter: handleOpen,
+      MouseLeave: handleClose,
+      SelectionGained: handleOpen,
+      SelectionLost: handleClose,
+    }),
+    [handleClose, handleOpen],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TooltipTrigger] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Event={eventHandlers} ref={setTriggerRef}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textbutton
+      Active={props.disabled !== true}
+      AutoButtonColor={false}
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Event={eventHandlers}
+      Selectable={props.disabled !== true}
+      Size={UDim2.fromOffset(140, 36)}
+      Text="Tooltip Trigger"
+      TextColor3={Color3.fromRGB(240, 244, 250)}
+      TextSize={15}
+      ref={setTriggerRef}
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Tooltip/context.ts

@@ -0,0 +1,21 @@
+import { createStrictContext, React } from "@lattice-ui/core";
+import type { TooltipContextValue, TooltipProviderContextValue } from "./types";
+
+const [TooltipContextProvider, useTooltipContext] = createStrictContext<TooltipContextValue>("Tooltip");
+
+const DEFAULT_TOOLTIP_PROVIDER_CONTEXT: TooltipProviderContextValue = {
+  delayDuration: 700,
+  skipDelayDuration: 300,
+  resolveOpenDelay: (requestedDelay) => requestedDelay ?? 700,
+  markOpen: () => {
+    // default no-op
+  },
+};
+
+const TooltipProviderContext = React.createContext<TooltipProviderContextValue>(DEFAULT_TOOLTIP_PROVIDER_CONTEXT);
+
+function useTooltipProviderContext() {
+  return React.useContext(TooltipProviderContext);
+}
+
+export { TooltipContextProvider, TooltipProviderContext, useTooltipContext, useTooltipProviderContext };

package/src/Tooltip/types.ts

@@ -0,0 +1,59 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type { PopperPlacement } from "@lattice-ui/popper";
+import type React from "@rbxts/react";
+
+export type TooltipSetOpen = (open: boolean) => void;
+
+export type TooltipContextValue = {
+  open: boolean;
+  setOpen: TooltipSetOpen;
+  openWithDelay: () => void;
+  close: () => void;
+  triggerRef: React.MutableRefObject<GuiObject | undefined>;
+  contentRef: React.MutableRefObject<GuiObject | undefined>;
+};
+
+export type TooltipProviderContextValue = {
+  delayDuration: number;
+  skipDelayDuration: number;
+  resolveOpenDelay: (requestedDelay?: number) => number;
+  markOpen: () => void;
+};
+
+export type TooltipProviderProps = {
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  children?: React.ReactNode;
+};
+
+export type TooltipProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  delayDuration?: number;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+};
+
+export type TooltipTriggerProps = {
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactElement;
+};
+
+export type TooltipPortalProps = {
+  container?: BasePlayerGui;
+  displayOrderBase?: number;
+  children?: React.ReactNode;
+};
+
+export type TooltipContentProps = {
+  asChild?: boolean;
+  forceMount?: boolean;
+  placement?: PopperPlacement;
+  offset?: Vector2;
+  padding?: number;
+  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+  onPointerDownOutside?: (event: LayerInteractEvent) => void;
+  onInteractOutside?: (event: LayerInteractEvent) => void;
+  children?: React.ReactNode;
+};

package/src/index.ts

@@ -0,0 +1,12 @@
+export { TooltipContent } from "./Tooltip/TooltipContent";
+export { TooltipPortal } from "./Tooltip/TooltipPortal";
+export { TooltipProvider } from "./Tooltip/TooltipProvider";
+export { Tooltip } from "./Tooltip/TooltipRoot";
+export { TooltipTrigger } from "./Tooltip/TooltipTrigger";
+export type {
+  TooltipContentProps,
+  TooltipPortalProps,
+  TooltipProps,
+  TooltipProviderProps,
+  TooltipTriggerProps,
+} from "./Tooltip/types";

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}