npm - @radix-ui/react-tooltip - Versions diffs - 0.1.8-rc.45 → 0.1.8-rc.48 - Mend

@radix-ui/react-tooltip 0.1.8-rc.45 → 0.1.8-rc.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -17,6 +17,11 @@ interface TooltipProviderProps {
      * @defaultValue 300
      */
     skipDelayDuration?: number;
+    /**
+     * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
+     * @defaultValue false
+     */
+    disableHoverableContent?: boolean;
 }
 export const TooltipProvider: React.FC<TooltipProviderProps>;
 export interface TooltipProps {
@@ -30,6 +35,11 @@ export interface TooltipProps {
      * @defaultValue 700
      */
     delayDuration?: number;
+    /**
+     * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
+     * @defaultValue false
+     */
+    disableHoverableContent?: boolean;
 }
 export const Tooltip: React.FC<TooltipProps>;
 type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;AAmBA,OAAA,yFAEE,CAAC;~~AA0BH~~;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;~~CAC5B~~;AAED,OAAA,MAAM,iBAAiB,MAAM,EAAE,CAAC,oBAAoB,~~CAqCnD~~,CAAC;~~AAwBF~~;IACE,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;~~IAEvC~~;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;~~CACxB~~;AAED,OAAA,MAAM,SAAS,MAAM,EAAE,CAAC,YAAY,~~CA+EnC~~,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,oCAA8B,SAAQ,oBAAoB;CAAG;AAE7D,OAAA,MAAM,~~6GA4CL~~,CAAC;AAeF,mBAAmB,MAAM,wBAAwB,CAAC,eAAsB,CAAC,CAAC;AAC1E,mCAA6B,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC/D,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,eAAe,MAAM,EAAE,CAAC,kBAAkB,CAY/C,CAAC;AAWF,oCAA8B,SAAQ,uBAAuB;IAC3D;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,~~0GAWL~~,CAAC;~~AAGF~~,6BAA6B,MAAM,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;AACrF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,OAAO,CAAC,CAAC;AACzF,iCAAkC,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC3D;;;OAGG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CACtE;AA0ED,wBAAwB,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,KAAK,CAAC,CAAC;AACrF,kCAA4B,SAAQ,gBAAgB;CAAG;AAEvD,OAAA,MAAM,qGAML,CAAC;~~AAMF~~,OAAA,MAAM,wCAA0B,CAAC;AACjC,OAAA,MAAM,4BAAc,CAAC;AACrB,OAAA,MAAM,sGAAwB,CAAC;AAC/B,OAAA,MAAM,oCAAsB,CAAC;AAC7B,OAAA,MAAM,mGAAwB,CAAC;AAC/B,OAAA,MAAM,8FAAoB,CAAC","sources":["packages/react/tooltip/src/packages/react/tooltip/src/Tooltip.tsx","packages/react/tooltip/src/packages/react/tooltip/src/index.ts","packages/react/tooltip/src/index.ts"],"sourcesContent":[null,null,"export * from './Tooltip';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
1	+ {"mappings":";;;;;;AAmBA,OAAA,yFAEE,CAAC;AAwBH;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,OAAA,MAAM,iBAAiB,MAAM,EAAE,CAAC,oBAAoB,CA4CnD,CAAC;AA0BF;IACE,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,OAAA,MAAM,SAAS,MAAM,EAAE,CAAC,YAAY,CA2FnC,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,oCAA8B,SAAQ,oBAAoB;CAAG;AAE7D,OAAA,MAAM,6GAyDL,CAAC;AAeF,mBAAmB,MAAM,wBAAwB,CAAC,eAAsB,CAAC,CAAC;AAC1E,mCAA6B,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC/D,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,eAAe,MAAM,EAAE,CAAC,kBAAkB,CAY/C,CAAC;AAWF,oCAA8B,SAAQ,uBAAuB;IAC3D;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,0GAgBL,CAAC;AA0FF,6BAA6B,MAAM,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;AACrF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,OAAO,CAAC,CAAC;AACzF,iCAAkC,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC3D;;;OAGG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CACtE;AA0ED,wBAAwB,MAAM,wBAAwB,CAAC,OAAO,gBAAgB,KAAK,CAAC,CAAC;AACrF,kCAA4B,SAAQ,gBAAgB;CAAG;AAEvD,OAAA,MAAM,qGAML,CAAC;AA+GF,OAAA,MAAM,wCAA0B,CAAC;AACjC,OAAA,MAAM,4BAAc,CAAC;AACrB,OAAA,MAAM,sGAAwB,CAAC;AAC/B,OAAA,MAAM,oCAAsB,CAAC;AAC7B,OAAA,MAAM,mGAAwB,CAAC;AAC/B,OAAA,MAAM,8FAAoB,CAAC","sources":["packages/react/tooltip/src/packages/react/tooltip/src/Tooltip.tsx","packages/react/tooltip/src/packages/react/tooltip/src/index.ts","packages/react/tooltip/src/index.ts"],"sourcesContent":[null,null,"export {\n createTooltipScope,\n //\n TooltipProvider,\n Tooltip,\n TooltipTrigger,\n TooltipPortal,\n TooltipContent,\n TooltipArrow,\n //\n Provider,\n Root,\n Trigger,\n Portal,\n Content,\n Arrow,\n} from './Tooltip';\nexport type {\n TooltipProps,\n TooltipTriggerProps,\n TooltipPortalProps,\n TooltipContentProps,\n TooltipArrowProps,\n} from './Tooltip';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js CHANGED Viewed

@@ -13,43 +13,26 @@ var $iVrL9$radixuireactslot = require("@radix-ui/react-slot");
 var $iVrL9$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
 var $iVrL9$radixuireactvisuallyhidden = require("@radix-ui/react-visually-hidden");
-function $parcel$exportWildcard(dest, source) {
-  Object.keys(source).forEach(function(key) {
-    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
-      return;
-    }
-    Object.defineProperty(dest, key, {
-      enumerable: true,
-      get: function get() {
-        return source[key];
-      }
-    });
-  });
-  return dest;
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-var $c34afbc43c90cc6f$exports = {};
-$parcel$export($c34afbc43c90cc6f$exports, "createTooltipScope", () => $c34afbc43c90cc6f$export$1c540a2224f0d865);
-$parcel$export($c34afbc43c90cc6f$exports, "TooltipProvider", () => $c34afbc43c90cc6f$export$f78649fb9ca566b8);
-$parcel$export($c34afbc43c90cc6f$exports, "Tooltip", () => $c34afbc43c90cc6f$export$28c660c63b792dea);
-$parcel$export($c34afbc43c90cc6f$exports, "TooltipTrigger", () => $c34afbc43c90cc6f$export$8c610744efcf8a1d);
-$parcel$export($c34afbc43c90cc6f$exports, "TooltipPortal", () => $c34afbc43c90cc6f$export$7b36b8f925ab7497);
-$parcel$export($c34afbc43c90cc6f$exports, "TooltipContent", () => $c34afbc43c90cc6f$export$e9003e2be37ec060);
-$parcel$export($c34afbc43c90cc6f$exports, "TooltipArrow", () => $c34afbc43c90cc6f$export$c27ee0ad710f7559);
-$parcel$export($c34afbc43c90cc6f$exports, "Provider", () => $c34afbc43c90cc6f$export$2881499e37b75b9a);
-$parcel$export($c34afbc43c90cc6f$exports, "Root", () => $c34afbc43c90cc6f$export$be92b6f5f03c0fe9);
-$parcel$export($c34afbc43c90cc6f$exports, "Trigger", () => $c34afbc43c90cc6f$export$41fb9f06171c75f4);
-$parcel$export($c34afbc43c90cc6f$exports, "Portal", () => $c34afbc43c90cc6f$export$602eac185826482c);
-$parcel$export($c34afbc43c90cc6f$exports, "Content", () => $c34afbc43c90cc6f$export$7c6e2c02157bb7d2);
-$parcel$export($c34afbc43c90cc6f$exports, "Arrow", () => $c34afbc43c90cc6f$export$21b07c8f274aebd5);
+$parcel$export(module.exports, "createTooltipScope", () => $c34afbc43c90cc6f$export$1c540a2224f0d865);
+$parcel$export(module.exports, "TooltipProvider", () => $c34afbc43c90cc6f$export$f78649fb9ca566b8);
+$parcel$export(module.exports, "Tooltip", () => $c34afbc43c90cc6f$export$28c660c63b792dea);
+$parcel$export(module.exports, "TooltipTrigger", () => $c34afbc43c90cc6f$export$8c610744efcf8a1d);
+$parcel$export(module.exports, "TooltipPortal", () => $c34afbc43c90cc6f$export$7b36b8f925ab7497);
+$parcel$export(module.exports, "TooltipContent", () => $c34afbc43c90cc6f$export$e9003e2be37ec060);
+$parcel$export(module.exports, "TooltipArrow", () => $c34afbc43c90cc6f$export$c27ee0ad710f7559);
+$parcel$export(module.exports, "Provider", () => $c34afbc43c90cc6f$export$2881499e37b75b9a);
+$parcel$export(module.exports, "Root", () => $c34afbc43c90cc6f$export$be92b6f5f03c0fe9);
+$parcel$export(module.exports, "Trigger", () => $c34afbc43c90cc6f$export$41fb9f06171c75f4);
+$parcel$export(module.exports, "Portal", () => $c34afbc43c90cc6f$export$602eac185826482c);
+$parcel$export(module.exports, "Content", () => $c34afbc43c90cc6f$export$7c6e2c02157bb7d2);
+$parcel$export(module.exports, "Arrow", () => $c34afbc43c90cc6f$export$21b07c8f274aebd5);
@@ -74,15 +57,11 @@ const $c34afbc43c90cc6f$var$usePopperScope = $iVrL9$radixuireactpopper.createPop
  * -----------------------------------------------------------------------------------------------*/ const $c34afbc43c90cc6f$var$PROVIDER_NAME = 'TooltipProvider';
 const $c34afbc43c90cc6f$var$DEFAULT_DELAY_DURATION = 700;
 const $c34afbc43c90cc6f$var$TOOLTIP_OPEN = 'tooltip.open';
-const [$c34afbc43c90cc6f$var$TooltipProviderContextProvider, $c34afbc43c90cc6f$var$useTooltipProviderContext] = $c34afbc43c90cc6f$var$createTooltipContext($c34afbc43c90cc6f$var$PROVIDER_NAME, {
-    isOpenDelayed: true,
-    delayDuration: $c34afbc43c90cc6f$var$DEFAULT_DELAY_DURATION,
-    onOpen: ()=>{},
-    onClose: ()=>{}
-});
+const [$c34afbc43c90cc6f$var$TooltipProviderContextProvider, $c34afbc43c90cc6f$var$useTooltipProviderContext] = $c34afbc43c90cc6f$var$createTooltipContext($c34afbc43c90cc6f$var$PROVIDER_NAME);
 const $c34afbc43c90cc6f$export$f78649fb9ca566b8 = (props)=>{
-    const { __scopeTooltip: __scopeTooltip , delayDuration: delayDuration = $c34afbc43c90cc6f$var$DEFAULT_DELAY_DURATION , skipDelayDuration: skipDelayDuration = 300 , children: children  } = props;
+    const { __scopeTooltip: __scopeTooltip , delayDuration: delayDuration = $c34afbc43c90cc6f$var$DEFAULT_DELAY_DURATION , skipDelayDuration: skipDelayDuration = 300 , disableHoverableContent: disableHoverableContent = false , children: children  } = props;
     const [isOpenDelayed, setIsOpenDelayed] = $iVrL9$react.useState(true);
+    const isPointerInTransitRef = $iVrL9$react.useRef(false);
     const skipDelayTimerRef = $iVrL9$react.useRef(0);
     $iVrL9$react.useEffect(()=>{
         const skipDelayTimer = skipDelayTimerRef.current;
@@ -103,7 +82,12 @@ const $c34afbc43c90cc6f$export$f78649fb9ca566b8 = (props)=>{
             , skipDelayDuration);
         }, [
             skipDelayDuration
-        ])
+        ]),
+        isPointerInTransitRef: isPointerInTransitRef,
+        onPointerInTransitChange: $iVrL9$react.useCallback((inTransit)=>{
+            isPointerInTransitRef.current = inTransit;
+        }, []),
+        disableHoverableContent: disableHoverableContent
     }, children);
 };
 /*#__PURE__*/ Object.assign($c34afbc43c90cc6f$export$f78649fb9ca566b8, {
@@ -114,28 +98,24 @@ const $c34afbc43c90cc6f$export$f78649fb9ca566b8 = (props)=>{
  * -----------------------------------------------------------------------------------------------*/ const $c34afbc43c90cc6f$var$TOOLTIP_NAME = 'Tooltip';
 const [$c34afbc43c90cc6f$var$TooltipContextProvider, $c34afbc43c90cc6f$var$useTooltipContext] = $c34afbc43c90cc6f$var$createTooltipContext($c34afbc43c90cc6f$var$TOOLTIP_NAME);
 const $c34afbc43c90cc6f$export$28c660c63b792dea = (props)=>{
-    const { __scopeTooltip: __scopeTooltip , children: children , open: openProp , defaultOpen: defaultOpen = false , onOpenChange: onOpenChange , delayDuration: delayDurationProp  } = props;
-    const context = $c34afbc43c90cc6f$var$useTooltipProviderContext($c34afbc43c90cc6f$var$TOOLTIP_NAME, __scopeTooltip);
+    const { __scopeTooltip: __scopeTooltip , children: children , open: openProp , defaultOpen: defaultOpen = false , onOpenChange: onOpenChange , disableHoverableContent: disableHoverableContentProp , delayDuration: delayDurationProp  } = props;
+    const providerContext = $c34afbc43c90cc6f$var$useTooltipProviderContext($c34afbc43c90cc6f$var$TOOLTIP_NAME, props.__scopeTooltip);
     const popperScope = $c34afbc43c90cc6f$var$usePopperScope(__scopeTooltip);
     const [trigger, setTrigger] = $iVrL9$react.useState(null);
     const contentId = $iVrL9$radixuireactid.useId();
     const openTimerRef = $iVrL9$react.useRef(0);
-    const delayDuration = delayDurationProp !== null && delayDurationProp !== void 0 ? delayDurationProp : context.delayDuration;
+    const disableHoverableContent = disableHoverableContentProp !== null && disableHoverableContentProp !== void 0 ? disableHoverableContentProp : providerContext.disableHoverableContent;
+    const delayDuration = delayDurationProp !== null && delayDurationProp !== void 0 ? delayDurationProp : providerContext.delayDuration;
     const wasOpenDelayedRef = $iVrL9$react.useRef(false);
-    const { onOpen: onOpen , onClose: onClose  } = context;
     const [open1 = false, setOpen] = $iVrL9$radixuireactusecontrollablestate.useControllableState({
         prop: openProp,
         defaultProp: defaultOpen,
         onChange: (open)=>{
             if (open) {
-                // we dispatch here so `TooltipProvider` isn't required to
-                // ensure other tooltips are aware of this one opening.
-                //
-                // as `onChange` is called within a lifecycle method we
+                providerContext.onOpen(); // as `onChange` is called within a lifecycle method we
                 // avoid dispatching via `dispatchDiscreteCustomEvent`.
                 document.dispatchEvent(new CustomEvent($c34afbc43c90cc6f$var$TOOLTIP_OPEN));
-                onOpen();
-            }
+            } else providerContext.onClose();
             onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
         }
     });
@@ -151,6 +131,12 @@ const $c34afbc43c90cc6f$export$28c660c63b792dea = (props)=>{
     }, [
         setOpen
     ]);
+    const handleClose = $iVrL9$react.useCallback(()=>{
+        window.clearTimeout(openTimerRef.current);
+        setOpen(false);
+    }, [
+        setOpen
+    ]);
     const handleDelayedOpen = $iVrL9$react.useCallback(()=>{
         window.clearTimeout(openTimerRef.current);
         openTimerRef.current = window.setTimeout(()=>{
@@ -173,24 +159,24 @@ const $c34afbc43c90cc6f$export$28c660c63b792dea = (props)=>{
         trigger: trigger,
         onTriggerChange: setTrigger,
         onTriggerEnter: $iVrL9$react.useCallback(()=>{
-            if (context.isOpenDelayed) handleDelayedOpen();
+            if (providerContext.isOpenDelayed) handleDelayedOpen();
             else handleOpen();
         }, [
-            context.isOpenDelayed,
+            providerContext.isOpenDelayed,
             handleDelayedOpen,
             handleOpen
         ]),
-        onOpen: $iVrL9$react.useCallback(handleOpen, [
-            handleOpen
-        ]),
-        onClose: $iVrL9$react.useCallback(()=>{
+        onTriggerLeave: $iVrL9$react.useCallback(()=>{
+            if (disableHoverableContent) handleClose();
+            else // Clear the timer in case the pointer leaves the trigger before the tooltip is opened.
             window.clearTimeout(openTimerRef.current);
-            setOpen(false);
-            onClose();
         }, [
-            setOpen,
-            onClose
-        ])
+            handleClose,
+            disableHoverableContent
+        ]),
+        onOpen: handleOpen,
+        onClose: handleClose,
+        disableHoverableContent: disableHoverableContent
     }, children));
 };
 /*#__PURE__*/ Object.assign($c34afbc43c90cc6f$export$28c660c63b792dea, {
@@ -202,9 +188,12 @@ const $c34afbc43c90cc6f$export$28c660c63b792dea = (props)=>{
 const $c34afbc43c90cc6f$export$8c610744efcf8a1d = /*#__PURE__*/ $iVrL9$react.forwardRef((props, forwardedRef)=>{
     const { __scopeTooltip: __scopeTooltip , ...triggerProps } = props;
     const context = $c34afbc43c90cc6f$var$useTooltipContext($c34afbc43c90cc6f$var$TRIGGER_NAME, __scopeTooltip);
+    const providerContext = $c34afbc43c90cc6f$var$useTooltipProviderContext($c34afbc43c90cc6f$var$TRIGGER_NAME, __scopeTooltip);
     const popperScope = $c34afbc43c90cc6f$var$usePopperScope(__scopeTooltip);
-    const composedTriggerRef = $iVrL9$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.onTriggerChange);
+    const ref = $iVrL9$react.useRef(null);
+    const composedRefs = $iVrL9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, context.onTriggerChange);
     const isPointerDownRef = $iVrL9$react.useRef(false);
+    const hasPointerMoveOpenedRef = $iVrL9$react.useRef(false);
     const handlePointerUp = $iVrL9$react.useCallback(()=>isPointerDownRef.current = false
     , []);
     $iVrL9$react.useEffect(()=>{
@@ -221,11 +210,18 @@ const $c34afbc43c90cc6f$export$8c610744efcf8a1d = /*#__PURE__*/ $iVrL9$react.for
         "aria-describedby": context.open ? context.contentId : undefined,
         "data-state": context.stateAttribute
     }, triggerProps, {
-        ref: composedTriggerRef,
-        onPointerEnter: $iVrL9$radixuiprimitive.composeEventHandlers(props.onPointerEnter, (event)=>{
-            if (event.pointerType !== 'touch') context.onTriggerEnter();
+        ref: composedRefs,
+        onPointerMove: $iVrL9$radixuiprimitive.composeEventHandlers(props.onPointerMove, (event)=>{
+            if (event.pointerType === 'touch') return;
+            if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
+                context.onTriggerEnter();
+                hasPointerMoveOpenedRef.current = true;
+            }
+        }),
+        onPointerLeave: $iVrL9$radixuiprimitive.composeEventHandlers(props.onPointerLeave, ()=>{
+            context.onTriggerLeave();
+            hasPointerMoveOpenedRef.current = false;
         }),
-        onPointerLeave: $iVrL9$radixuiprimitive.composeEventHandlers(props.onPointerLeave, context.onClose),
         onPointerDown: $iVrL9$radixuiprimitive.composeEventHandlers(props.onPointerDown, ()=>{
             isPointerDownRef.current = true;
             document.addEventListener('pointerup', handlePointerUp, {
@@ -274,13 +270,116 @@ const $c34afbc43c90cc6f$export$7b36b8f925ab7497 = (props)=>{
  * -----------------------------------------------------------------------------------------------*/ const $c34afbc43c90cc6f$var$CONTENT_NAME = 'TooltipContent';
 const $c34afbc43c90cc6f$export$e9003e2be37ec060 = /*#__PURE__*/ $iVrL9$react.forwardRef((props, forwardedRef)=>{
     const portalContext = $c34afbc43c90cc6f$var$usePortalContext($c34afbc43c90cc6f$var$CONTENT_NAME, props.__scopeTooltip);
-    const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
+    const { forceMount: forceMount = portalContext.forceMount , side: side = 'top' , ...contentProps } = props;
     const context = $c34afbc43c90cc6f$var$useTooltipContext($c34afbc43c90cc6f$var$CONTENT_NAME, props.__scopeTooltip);
     return /*#__PURE__*/ $iVrL9$react.createElement($iVrL9$radixuireactpresence.Presence, {
         present: forceMount || context.open
-    }, /*#__PURE__*/ $iVrL9$react.createElement($c34afbc43c90cc6f$var$TooltipContentImpl, ($parcel$interopDefault($iVrL9$babelruntimehelpersextends))({
+    }, context.disableHoverableContent ? /*#__PURE__*/ $iVrL9$react.createElement($c34afbc43c90cc6f$var$TooltipContentImpl, ($parcel$interopDefault($iVrL9$babelruntimehelpersextends))({
+        side: side
+    }, contentProps, {
         ref: forwardedRef
-    }, contentProps)));
+    })) : /*#__PURE__*/ $iVrL9$react.createElement($c34afbc43c90cc6f$var$TooltipContentHoverable, ($parcel$interopDefault($iVrL9$babelruntimehelpersextends))({
+        side: side
+    }, contentProps, {
+        ref: forwardedRef
+    })));
+});
+const $c34afbc43c90cc6f$var$TooltipContentHoverable = /*#__PURE__*/ $iVrL9$react.forwardRef((props, forwardedRef)=>{
+    const context = $c34afbc43c90cc6f$var$useTooltipContext($c34afbc43c90cc6f$var$CONTENT_NAME, props.__scopeTooltip);
+    const providerContext = $c34afbc43c90cc6f$var$useTooltipProviderContext($c34afbc43c90cc6f$var$CONTENT_NAME, props.__scopeTooltip);
+    const ref = $iVrL9$react.useRef(null);
+    const composedRefs = $iVrL9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
+    const [pointerGraceArea, setPointerGraceArea] = $iVrL9$react.useState(null);
+    const { trigger: trigger , onClose: onClose  } = context;
+    const content = ref.current;
+    const { onPointerInTransitChange: onPointerInTransitChange  } = providerContext;
+    const handleRemoveGraceArea = $iVrL9$react.useCallback(()=>{
+        setPointerGraceArea(null);
+        onPointerInTransitChange(false);
+    }, [
+        onPointerInTransitChange
+    ]);
+    const handleCreateGraceArea = $iVrL9$react.useCallback((event, hoverTarget)=>{
+        const currentTarget = event.currentTarget;
+        const exitPoint = {
+            x: event.clientX,
+            y: event.clientY
+        };
+        const exitSide = $c34afbc43c90cc6f$var$getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+        const bleed = exitSide === 'right' || exitSide === 'bottom' ? -5 : 5;
+        const isXAxis = exitSide === 'right' || exitSide === 'left';
+        const startPoint = isXAxis ? {
+            x: event.clientX + bleed,
+            y: event.clientY
+        } : {
+            x: event.clientX,
+            y: event.clientY + bleed
+        };
+        const hoverTargetPoints = $c34afbc43c90cc6f$var$getPointsFromRect(hoverTarget.getBoundingClientRect());
+        const graceArea = $c34afbc43c90cc6f$var$getHull([
+            startPoint,
+            ...hoverTargetPoints
+        ]);
+        setPointerGraceArea(graceArea);
+        onPointerInTransitChange(true);
+    }, [
+        onPointerInTransitChange
+    ]);
+    $iVrL9$react.useEffect(()=>{
+        return ()=>handleRemoveGraceArea()
+        ;
+    }, [
+        handleRemoveGraceArea
+    ]);
+    $iVrL9$react.useEffect(()=>{
+        if (trigger && content) {
+            const handleTriggerLeave = (event)=>handleCreateGraceArea(event, content)
+            ;
+            const handleContentLeave = (event)=>handleCreateGraceArea(event, trigger)
+            ;
+            trigger.addEventListener('pointerleave', handleTriggerLeave);
+            content.addEventListener('pointerleave', handleContentLeave);
+            return ()=>{
+                trigger.removeEventListener('pointerleave', handleTriggerLeave);
+                content.removeEventListener('pointerleave', handleContentLeave);
+            };
+        }
+    }, [
+        trigger,
+        content,
+        handleCreateGraceArea,
+        handleRemoveGraceArea
+    ]);
+    $iVrL9$react.useEffect(()=>{
+        if (pointerGraceArea) {
+            const handleTrackPointerGrace = (event)=>{
+                const target = event.target;
+                const pointerPosition = {
+                    x: event.clientX,
+                    y: event.clientY
+                };
+                const hasEnteredTarget = (trigger === null || trigger === void 0 ? void 0 : trigger.contains(target)) || (content === null || content === void 0 ? void 0 : content.contains(target));
+                const isPointerOutsideGraceArea = !$c34afbc43c90cc6f$var$isPointInPolygon(pointerPosition, pointerGraceArea);
+                if (hasEnteredTarget) handleRemoveGraceArea();
+                else if (isPointerOutsideGraceArea) {
+                    handleRemoveGraceArea();
+                    onClose();
+                }
+            };
+            document.addEventListener('pointermove', handleTrackPointerGrace);
+            return ()=>document.removeEventListener('pointermove', handleTrackPointerGrace)
+            ;
+        }
+    }, [
+        trigger,
+        content,
+        pointerGraceArea,
+        onClose,
+        handleRemoveGraceArea
+    ]);
+    return /*#__PURE__*/ $iVrL9$react.createElement($c34afbc43c90cc6f$var$TooltipContentImpl, ($parcel$interopDefault($iVrL9$babelruntimehelpersextends))({}, props, {
+        ref: composedRefs
+    }));
 });
 const $c34afbc43c90cc6f$var$TooltipContentImpl = /*#__PURE__*/ $iVrL9$react.forwardRef((props, forwardedRef)=>{
     const { __scopeTooltip: __scopeTooltip , children: children , 'aria-label': ariaLabel , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , ...contentProps } = props;
@@ -350,7 +449,101 @@ const $c34afbc43c90cc6f$export$c27ee0ad710f7559 = /*#__PURE__*/ $iVrL9$react.for
 /*#__PURE__*/ Object.assign($c34afbc43c90cc6f$export$c27ee0ad710f7559, {
     displayName: $c34afbc43c90cc6f$var$ARROW_NAME
 });
-/* -----------------------------------------------------------------------------------------------*/ const $c34afbc43c90cc6f$export$2881499e37b75b9a = $c34afbc43c90cc6f$export$f78649fb9ca566b8;
+/* -----------------------------------------------------------------------------------------------*/ function $c34afbc43c90cc6f$var$getExitSideFromRect(point, rect) {
+    const top = Math.abs(rect.top - point.y);
+    const bottom = Math.abs(rect.bottom - point.y);
+    const right = Math.abs(rect.right - point.x);
+    const left = Math.abs(rect.left - point.x);
+    switch(Math.min(top, bottom, right, left)){
+        case left:
+            return 'left';
+        case right:
+            return 'right';
+        case top:
+            return 'top';
+        case bottom:
+            return 'bottom';
+        default:
+            return null;
+    }
+}
+function $c34afbc43c90cc6f$var$getPointsFromRect(rect) {
+    const { top: top , right: right , bottom: bottom , left: left  } = rect;
+    return [
+        {
+            x: left,
+            y: top
+        },
+        {
+            x: right,
+            y: top
+        },
+        {
+            x: right,
+            y: bottom
+        },
+        {
+            x: left,
+            y: bottom
+        }
+    ];
+} // Determine if a point is inside of a polygon.
+// Based on https://github.com/substack/point-in-polygon
+function $c34afbc43c90cc6f$var$isPointInPolygon(point, polygon) {
+    const { x: x , y: y  } = point;
+    let inside = false;
+    for(let i = 0, j = polygon.length - 1; i < polygon.length; j = i++){
+        const xi = polygon[i].x;
+        const yi = polygon[i].y;
+        const xj = polygon[j].x;
+        const yj = polygon[j].y; // prettier-ignore
+        const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+        if (intersect) inside = !inside;
+    }
+    return inside;
+} // Returns a new array of points representing the convex hull of the given set of points.
+// https://www.nayuki.io/page/convex-hull-algorithm
+function $c34afbc43c90cc6f$var$getHull(points) {
+    const newPoints = points.slice();
+    newPoints.sort((a, b)=>{
+        if (a.x < b.x) return -1;
+        else if (a.x > b.x) return 1;
+        else if (a.y < b.y) return -1;
+        else if (a.y > b.y) return 1;
+        else return 0;
+    });
+    return $c34afbc43c90cc6f$var$getHullPresorted(newPoints);
+} // Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.
+function $c34afbc43c90cc6f$var$getHullPresorted(points) {
+    if (points.length <= 1) return points.slice();
+    const upperHull = [];
+    for(let i = 0; i < points.length; i++){
+        const p = points[i];
+        while(upperHull.length >= 2){
+            const q = upperHull[upperHull.length - 1];
+            const r = upperHull[upperHull.length - 2];
+            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
+            else break;
+        }
+        upperHull.push(p);
+    }
+    upperHull.pop();
+    const lowerHull = [];
+    for(let i1 = points.length - 1; i1 >= 0; i1--){
+        const p = points[i1];
+        while(lowerHull.length >= 2){
+            const q = lowerHull[lowerHull.length - 1];
+            const r = lowerHull[lowerHull.length - 2];
+            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
+            else break;
+        }
+        lowerHull.push(p);
+    }
+    lowerHull.pop();
+    if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) return upperHull;
+    else return upperHull.concat(lowerHull);
+}
+const $c34afbc43c90cc6f$export$2881499e37b75b9a = $c34afbc43c90cc6f$export$f78649fb9ca566b8;
 const $c34afbc43c90cc6f$export$be92b6f5f03c0fe9 = $c34afbc43c90cc6f$export$28c660c63b792dea;
 const $c34afbc43c90cc6f$export$41fb9f06171c75f4 = $c34afbc43c90cc6f$export$8c610744efcf8a1d;
 const $c34afbc43c90cc6f$export$602eac185826482c = $c34afbc43c90cc6f$export$7b36b8f925ab7497;
@@ -358,7 +551,6 @@ const $c34afbc43c90cc6f$export$7c6e2c02157bb7d2 = $c34afbc43c90cc6f$export$e9003
 const $c34afbc43c90cc6f$export$21b07c8f274aebd5 = $c34afbc43c90cc6f$export$c27ee0ad710f7559;
-$parcel$exportWildcard(module.exports, $c34afbc43c90cc6f$exports);
 //# sourceMappingURL=index.js.map