@hanzogui/tooltip 2.0.0

package/src/Tooltip.native.tsx

@@ -0,0 +1,26 @@
+import { withStaticProperties } from '@hanzogui/helpers'
+
+// no output on native for now
+// could have an option to long-press or similar to show in a context menu/drawer
+
+const RenderChildren = (props: any) => {
+  return props.children
+}
+
+const RenderNull = (props: any) => {
+  return null
+}
+
+export const TooltipGroup = () => null
+
+export const closeOpenTooltips = () => {
+  /* noop */
+}
+
+export const Tooltip = withStaticProperties(RenderChildren, {
+  Anchor: RenderChildren,
+  Arrow: RenderNull,
+  Close: RenderNull,
+  Content: RenderNull,
+  Trigger: RenderChildren,
+})

package/src/Tooltip.tsx

@@ -0,0 +1,291 @@
+import '@hanzogui/polyfill-dev'
+
+import { FloatingDelayGroup, useDelayGroupContext, type Delay } from '@hanzogui/floating'
+import type { SizeTokens, GuiElement } from '@hanzogui/core'
+import { useEvent } from '@hanzogui/core'
+import { FloatingOverrideContext } from '@hanzogui/floating'
+import { getSize } from '@hanzogui/get-token'
+import { withStaticProperties } from '@hanzogui/helpers'
+import type {
+  PopoverAnchorProps,
+  PopoverContentProps,
+  PopoverTriggerProps,
+} from '@hanzogui/popover'
+import {
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverContent,
+  PopoverContextProvider,
+  PopoverTrigger,
+  useFloatingContext,
+} from '@hanzogui/popover'
+import type { PopperArrowProps, PopperProps } from '@hanzogui/popper'
+import { Popper, PopperContentFrame } from '@hanzogui/popper'
+import { useControllableState } from '@hanzogui/use-controllable-state'
+import * as React from 'react'
+
+const TOOLTIP_SCOPE = ''
+
+export type TooltipScopes = string
+
+type ScopedProps<P> = Omit<P, 'scope'> & { scope?: TooltipScopes }
+
+export type TooltipContentProps = ScopedProps<PopoverContentProps>
+
+// warning: setting to stylebale causes issues with themeInverse across portal root
+
+// performance: avoid 2 components we never use
+const ALWAYS_DISABLE_TOOLTIP = {
+  focus: true,
+  'remove-scroll': true,
+  // it's nice to hit escape to hide a tooltip
+  // dismiss: true
+} as const
+
+const TooltipContent = PopperContentFrame.styleable<TooltipContentProps>(
+  (props, ref) => {
+    const preventAnimation = React.useContext(PreventTooltipAnimationContext)
+    const zIndexFromContext = React.useContext(TooltipZIndexContext)
+
+    return (
+      <PopoverContent
+        scope={props.scope || TOOLTIP_SCOPE}
+        alwaysDisable={ALWAYS_DISABLE_TOOLTIP}
+        {...(!props.unstyled && {
+          backgroundColor: '$background',
+          alignItems: 'center',
+          pointerEvents: 'none',
+          size: '$true',
+        })}
+        ref={ref}
+        // zIndex from root Tooltip prop flows to portal
+        {...(zIndexFromContext !== undefined && { zIndex: zIndexFromContext })}
+        {...props}
+        {...(preventAnimation && {
+          transition: null,
+        })}
+      />
+    )
+  },
+  {
+    staticConfig: {
+      componentName: 'Tooltip',
+    },
+  }
+)
+
+const TooltipArrow = React.forwardRef<GuiElement, PopperArrowProps>((props, ref) => {
+  return (
+    <PopoverArrow
+      scope={props.scope || TOOLTIP_SCOPE}
+      componentName="Tooltip"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+
+export type TooltipProps = ScopedProps<
+  PopperProps & {
+    open?: boolean
+    unstyled?: boolean
+    children?: React.ReactNode
+    onOpenChange?: (open: boolean) => void
+    focus?: {
+      enabled?: boolean
+      visibleOnly?: boolean
+    }
+    groupId?: string
+    restMs?: number
+    delay?:
+      | number
+      | {
+          open?: number
+          close?: number
+        }
+    disableAutoCloseOnScroll?: boolean
+    /**
+     * z-index for the tooltip portal. Use this when tooltips need to appear
+     * above other portaled content like dialogs.
+     */
+    zIndex?: number
+  }
+>
+
+const PreventTooltipAnimationContext = React.createContext(false)
+const TooltipZIndexContext = React.createContext<number | undefined>(undefined)
+
+export const TooltipGroup = ({
+  children,
+  delay,
+  preventAnimation = false,
+  timeoutMs,
+}: {
+  children?: any
+  delay: Delay
+  preventAnimation?: boolean
+  timeoutMs?: number
+}) => {
+  return (
+    <PreventTooltipAnimationContext.Provider value={preventAnimation}>
+      <FloatingDelayGroup
+        timeoutMs={timeoutMs}
+        delay={React.useMemo(() => delay, [JSON.stringify(delay)])}
+      >
+        {children}
+      </FloatingDelayGroup>
+    </PreventTooltipAnimationContext.Provider>
+  )
+}
+
+const setOpens = new Set<React.Dispatch<React.SetStateAction<boolean>>>()
+
+export const closeOpenTooltips = () => {
+  setOpens.forEach((x) => x(false))
+}
+
+const TooltipComponent = React.forwardRef(function Tooltip(
+  props: TooltipProps,
+  // no real ref here but React complaining need to see why see SandboxCustomStyledAnimatedTooltip.ts
+  ref
+) {
+  // hooks inside useFloatingFn confuse the React Compiler
+  'use no memo'
+
+  const {
+    children,
+    delay: delayProp,
+    restMs: restMsProp,
+    onOpenChange: onOpenChangeProp,
+    focus,
+    open: openProp,
+    disableAutoCloseOnScroll,
+    zIndex,
+    scope = TOOLTIP_SCOPE,
+    ...restProps
+  } = props
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)
+  const { delay: delayGroup, setCurrentId } = useDelayGroupContext()
+  // Use delayProp if explicitly provided, otherwise fall back to group delay or default 400
+  const delay = delayProp !== undefined ? delayProp : (delayGroup ?? 400)
+  const restMs = restMsProp ?? (typeof delay === 'number' ? delay : 0)
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: false,
+    onChange: onOpenChangeProp,
+  })
+  const id = props.groupId
+
+  const onOpenChange = useEvent((open: boolean) => {
+    if (open) {
+      setCurrentId(id)
+    }
+    setOpen(open)
+  })
+
+  // Auto close when document scroll
+  React.useEffect(() => {
+    if (!open) return
+    if (disableAutoCloseOnScroll) return
+    if (typeof document === 'undefined') return
+    const closeIt = () => {
+      setOpen(false)
+    }
+    setOpens.add(setOpen)
+    document.documentElement.addEventListener('scroll', closeIt)
+    return () => {
+      setOpens.delete(setOpen)
+      document.documentElement.removeEventListener('scroll', closeIt)
+    }
+  }, [open, disableAutoCloseOnScroll])
+
+  // use the shared floating context from popover — gives us multi-trigger
+  // hover coordination (onHoverReference/onLeaveReference + grace period)
+  // and safePolygon for free
+  const floatingContext = useFloatingContext({
+    open,
+    setOpen: onOpenChange,
+    disable: false,
+    disableFocus: false,
+    hoverable: true,
+    role: 'tooltip',
+    focus,
+    groupId: id,
+    delay,
+    restMs,
+  })
+
+  const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), [])
+  const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), [])
+  const contentId = React.useId()
+  const smallerSize = props.unstyled
+    ? null
+    : getSize('$true', {
+        shift: -2,
+        bounds: [0],
+      })
+
+  const content = (
+    <FloatingOverrideContext.Provider value={floatingContext}>
+      {/* default tooltip to a smaller size */}
+      <Popper
+        scope={scope}
+        size={smallerSize?.key as SizeTokens}
+        allowFlip
+        stayInFrame
+        open={open}
+        {...restProps}
+      >
+        <PopoverContextProvider
+          scope={scope}
+          contentId={contentId}
+          triggerRef={triggerRef}
+          open={open}
+          onOpenChange={setOpen}
+          onOpenToggle={voidFn}
+          hasCustomAnchor={hasCustomAnchor}
+          onCustomAnchorAdd={onCustomAnchorAdd}
+          onCustomAnchorRemove={onCustomAnchorRemove}
+        >
+          {children}
+        </PopoverContextProvider>
+      </Popper>
+    </FloatingOverrideContext.Provider>
+  )
+
+  if (zIndex !== undefined) {
+    return (
+      <TooltipZIndexContext.Provider value={zIndex}>
+        {content}
+      </TooltipZIndexContext.Provider>
+    )
+  }
+
+  return content
+})
+
+const TooltipTrigger = React.forwardRef(function TooltipTrigger(
+  props: ScopedProps<PopoverTriggerProps>,
+  ref: any
+) {
+  const { scope, ...rest } = props
+  return <PopoverTrigger {...rest} scope={scope || TOOLTIP_SCOPE} ref={ref} />
+})
+
+const TooltipAnchor = React.forwardRef(function TooltipAnchor(
+  props: ScopedProps<PopoverAnchorProps>,
+  ref: any
+) {
+  const { scope, ...rest } = props
+  return <PopoverAnchor {...rest} scope={scope || TOOLTIP_SCOPE} ref={ref} />
+})
+
+export const Tooltip = withStaticProperties(TooltipComponent, {
+  Anchor: TooltipAnchor,
+  Arrow: TooltipArrow,
+  Content: TooltipContent,
+  Trigger: TooltipTrigger,
+})
+
+const voidFn = () => {}

package/src/TooltipSimple.native.tsx

@@ -0,0 +1,5 @@
+const RenderChildren = (props: any) => {
+  return props.children
+}
+
+export const TooltipSimple = RenderChildren

package/src/TooltipSimple.tsx

@@ -0,0 +1,85 @@
+import { getSpace } from '@hanzogui/get-token'
+import type { SizableStackProps } from '@hanzogui/stacks'
+import { Paragraph } from '@hanzogui/text'
+import * as React from 'react'
+
+import type { TooltipProps } from './Tooltip'
+import { Tooltip } from './Tooltip'
+
+export type TooltipSimpleProps = TooltipProps & {
+  disabled?: boolean
+  label?: React.ReactNode
+  children?: React.ReactNode
+  contentProps?: SizableStackProps
+}
+
+export const TooltipSimple: React.FC<TooltipSimpleProps> = React.forwardRef(
+  ({ label, children, contentProps, disabled, ...tooltipProps }, ref) => {
+    'use no memo'
+
+    const child = React.Children.only(children)
+
+    if (!label) {
+      return children
+    }
+
+    return (
+      <Tooltip
+        disableRTL
+        offset={15}
+        restMs={40}
+        delay={40}
+        // ensure tooltips appear above dialogs and other portaled content
+        zIndex={1_000_000}
+        {...tooltipProps}
+        {...(disabled ? { open: false } : null)}
+      >
+        <Tooltip.Trigger
+          {...(typeof label === 'string' && {
+            'aria-label': label,
+          })}
+          asChild="except-style"
+        >
+          {ref && React.isValidElement(child)
+            ? React.cloneElement(child, { ref } as any)
+            : child}
+        </Tooltip.Trigger>
+
+        <Tooltip.Content
+          enterStyle={{ y: -4, opacity: 0, scale: 0.96 }}
+          exitStyle={{ y: -4, opacity: 0, scale: 0.96 }}
+          scale={1}
+          elevation="$0.5"
+          opacity={1}
+          pointerEvents="none"
+          paddingVertical={getSpace(tooltipProps.size || '$true', {
+            shift: -4,
+          })}
+          animateOnly={['transform', 'opacity']}
+          transition={[
+            'quicker',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          {...contentProps}
+        >
+          <Tooltip.Arrow />
+          <Paragraph
+            maxWidth={350}
+            overflow="hidden"
+            size="$3"
+            textAlign="center"
+            $platform-web={{
+              textWrap: 'balance',
+            }}
+          >
+            {label}
+          </Paragraph>
+        </Tooltip.Content>
+      </Tooltip>
+    )
+  }
+)

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './Tooltip'
+export * from './TooltipSimple'

package/types/Tooltip.d.ts

@@ -0,0 +1,92 @@
+import '@gui/polyfill-dev';
+import { type Delay } from '@gui/floating';
+import type { SizeTokens, GuiElement } from '@gui/core';
+import type { PopoverAnchorProps, PopoverContentProps, PopoverTriggerProps } from '@gui/popover';
+import type { PopperProps } from '@gui/popper';
+import * as React from 'react';
+export type TooltipScopes = string;
+type ScopedProps<P> = Omit<P, 'scope'> & {
+    scope?: TooltipScopes;
+};
+export type TooltipContentProps = ScopedProps<PopoverContentProps>;
+export type TooltipProps = ScopedProps<PopperProps & {
+    open?: boolean;
+    unstyled?: boolean;
+    children?: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    focus?: {
+        enabled?: boolean;
+        visibleOnly?: boolean;
+    };
+    groupId?: string;
+    restMs?: number;
+    delay?: number | {
+        open?: number;
+        close?: number;
+    };
+    disableAutoCloseOnScroll?: boolean;
+    /**
+     * z-index for the tooltip portal. Use this when tooltips need to appear
+     * above other portaled content like dialogs.
+     */
+    zIndex?: number;
+}>;
+export declare const TooltipGroup: ({ children, delay, preventAnimation, timeoutMs, }: {
+    children?: any;
+    delay: Delay;
+    preventAnimation?: boolean;
+    timeoutMs?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const closeOpenTooltips: () => void;
+export declare const Tooltip: React.ForwardRefExoticComponent<Omit<PopperProps & {
+    open?: boolean;
+    unstyled?: boolean;
+    children?: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    focus?: {
+        enabled?: boolean;
+        visibleOnly?: boolean;
+    };
+    groupId?: string;
+    restMs?: number;
+    delay?: number | {
+        open?: number;
+        close?: number;
+    };
+    disableAutoCloseOnScroll?: boolean;
+    /**
+     * z-index for the tooltip portal. Use this when tooltips need to appear
+     * above other portaled content like dialogs.
+     */
+    zIndex?: number;
+}, "scope"> & {
+    scope?: TooltipScopes;
+} & React.RefAttributes<unknown>> & {
+    Anchor: React.ForwardRefExoticComponent<Omit<PopoverAnchorProps, "scope"> & {
+        scope?: TooltipScopes;
+    } & React.RefAttributes<unknown>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<import("@gui/core").GetFinalProps<import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }>, keyof import("@gui/stacks").StackVariants> & import("@gui/stacks").StackVariants & import("@gui/popper").PopperArrowExtraProps & React.RefAttributes<GuiElement>>;
+    Content: import("@gui/core").GuiComponent<Omit<import("@gui/core").GetFinalProps<import("@gui/core").RNGuiViewNonStyleProps, import("@gui/core").StackStyleBase, {
+        size?: SizeTokens | undefined;
+        unstyled?: boolean | undefined;
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }>, "theme" | "debug" | "scope" | "hitSlop" | "pointerEvents" | "display" | "children" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "disabled" | "className" | "themeShallow" | "unstyled" | "id" | "render" | "group" | "untilMeasured" | "componentName" | "tabIndex" | "role" | "disableOptimization" | "forceStyle" | "disableClassName" | "animatedBy" | "onStartShouldSetResponder" | "onScrollShouldSetResponder" | "onScrollShouldSetResponderCapture" | "onSelectionChangeShouldSetResponder" | "onSelectionChangeShouldSetResponderCapture" | "onLayout" | "elevationAndroid" | "rel" | "download" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "style" | "onFocus" | "onBlur" | "onPointerCancel" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseEnter" | "onMouseLeave" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onClick" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onChange" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "position" | "x" | "y" | "perspective" | "scale" | "scaleX" | "scaleY" | "skewX" | "skewY" | "matrix" | "rotate" | "rotateY" | "rotateX" | "rotateZ" | "borderCurve" | "contain" | "cursor" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "outline" | "userSelect" | "backdropFilter" | "background" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "boxShadow" | "border" | "overflowX" | "overflowY" | "transformOrigin" | "filter" | "backgroundClip" | "backgroundBlendMode" | "backgroundAttachment" | "clipPath" | "caretColor" | "transformStyle" | "mask" | "maskImage" | "textEmphasis" | "borderImage" | "float" | "content" | "overflowBlock" | "overflowInline" | "maskBorder" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridTemplateColumns" | "gridTemplateAreas" | "containerType" | "blockSize" | "inlineSize" | "minBlockSize" | "maxBlockSize" | "objectFit" | "verticalAlign" | "minInlineSize" | "maxInlineSize" | "borderInlineColor" | "borderInlineStartColor" | "borderInlineEndColor" | "borderBlockWidth" | "borderBlockStartWidth" | "borderBlockEndWidth" | "borderInlineWidth" | "borderInlineStartWidth" | "borderInlineEndWidth" | "borderBlockStyle" | "borderBlockStartStyle" | "borderBlockEndStyle" | "borderInlineStyle" | "borderInlineStartStyle" | "borderInlineEndStyle" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "inset" | "insetBlock" | "insetBlockStart" | "insetBlockEnd" | "insetInline" | "insetInlineStart" | "insetInlineEnd" | "transition" | "animateOnly" | "animatePresence" | "passThrough" | "elevation" | "backfaceVisibility" | "backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderBottomColor" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderColor" | "borderEndColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderLeftColor" | "borderRadius" | "borderRightColor" | "borderStartColor" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTopColor" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "opacity" | "isolation" | "mixBlendMode" | "experimental_backgroundImage" | "alignContent" | "alignItems" | "alignSelf" | "aspectRatio" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth" | "bottom" | "boxSizing" | "end" | "flex" | "flexBasis" | "flexDirection" | "rowGap" | "gap" | "columnGap" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "margin" | "marginBottom" | "marginEnd" | "marginHorizontal" | "marginLeft" | "marginRight" | "marginStart" | "marginTop" | "marginVertical" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "overflow" | "padding" | "paddingBottom" | "paddingEnd" | "paddingHorizontal" | "paddingLeft" | "paddingRight" | "paddingStart" | "paddingTop" | "paddingVertical" | "right" | "start" | "top" | "width" | "zIndex" | "direction" | "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "transform" | "transformMatrix" | "rotation" | "translateX" | "translateY" | "size" | "transparent" | "fullscreen" | "circular" | "elevate" | "bordered" | "chromeless" | `$${string}` | `$${number}` | `$group-${string}` | `$group-${number}` | `$group-${string}-hover` | `$group-${string}-press` | `$group-${string}-focus` | `$group-${string}-focusVisible` | `$group-${string}-focusWithin` | `$group-${number}-hover` | `$group-${number}-press` | `$group-${number}-focus` | `$group-${number}-focusVisible` | `$group-${number}-focusWithin` | `$theme-${string}` | `$theme-${number}` | "branches" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "forceUnmount" | "onBlurCapture" | "onFocusCapture" | "hoverStyle" | "pressStyle" | "focusStyle" | "focusWithinStyle" | "focusVisibleStyle" | "disabledStyle" | "exitStyle" | "enterStyle" | "animatePosition" | "enableAnimationForPositionChange" | "lazyMount" | "trapFocus" | "disableFocusScope" | "onOpenAutoFocus" | "onCloseAutoFocus" | "enableRemoveScroll" | "freezeContentsWhenHidden" | "alwaysDisable"> & Omit<import("@gui/popover").PopoverContentTypeProps, "scope"> & {
+        scope?: TooltipScopes;
+    }, GuiElement, import("@gui/core").RNGuiViewNonStyleProps & Omit<import("@gui/popover").PopoverContentTypeProps, "scope"> & {
+        scope?: TooltipScopes;
+    }, import("@gui/core").StackStyleBase, {
+        size?: SizeTokens | undefined;
+        unstyled?: boolean | undefined;
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@gui/core").StaticConfigPublic>;
+    Trigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "scope"> & {
+        scope?: TooltipScopes;
+    } & React.RefAttributes<unknown>>;
+};
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/types/Tooltip.native.d.ts

@@ -0,0 +1,10 @@
+export declare const TooltipGroup: () => null;
+export declare const closeOpenTooltips: () => void;
+export declare const Tooltip: ((props: any) => any) & {
+    Anchor: (props: any) => any;
+    Arrow: (props: any) => null;
+    Close: (props: any) => null;
+    Content: (props: any) => null;
+    Trigger: (props: any) => any;
+};
+//# sourceMappingURL=Tooltip.native.d.ts.map

package/types/TooltipSimple.d.ts

@@ -0,0 +1,11 @@
+import type { SizableStackProps } from '@gui/stacks';
+import * as React from 'react';
+import type { TooltipProps } from './Tooltip';
+export type TooltipSimpleProps = TooltipProps & {
+    disabled?: boolean;
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    contentProps?: SizableStackProps;
+};
+export declare const TooltipSimple: React.FC<TooltipSimpleProps>;
+//# sourceMappingURL=TooltipSimple.d.ts.map

package/types/TooltipSimple.native.d.ts

@@ -0,0 +1,2 @@
+export declare const TooltipSimple: (props: any) => any;
+//# sourceMappingURL=TooltipSimple.native.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Tooltip';
+export * from './TooltipSimple';
+//# sourceMappingURL=index.d.ts.map