fix(Tooltip): stuck if scrolling the page with tooltip (#646)

* fix(Tooltip): stuck if scrolling the page with tooltip * chore: fix story
radix-vue · Jan 31, 2024 · ddb2b9a · ddb2b9a
1 parent ea6fb26
commit ddb2b9a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/packages/radix-vue/src/Tooltip/TooltipProvider.vue b/packages/radix-vue/src/Tooltip/TooltipProvider.vue
@@ -41,7 +41,7 @@ export interface TooltipProviderProps {
 </script>
 
 <script setup lang="ts">
-import { useTimeoutFn } from '@vueuse/shared'
+import { refAutoReset, useTimeoutFn } from '@vueuse/shared'
 import { ref, toRefs } from 'vue'
 
 const props = withDefaults(defineProps<TooltipProviderProps>(), {
@@ -53,7 +53,8 @@ const { delayDuration, skipDelayDuration, disableHoverableContent, disableClosin
 useForwardExpose()
 
 const isOpenDelayed = ref(true)
-const isPointerInTransitRef = ref(false)
+// Reset the inTransit state if idle/scrolled.
+const isPointerInTransitRef = refAutoReset(false, 300)
 
 const { start: startTimer, stop: clearTimer } = useTimeoutFn(() => {
   isOpenDelayed.value = true

diff --git a/packages/radix-vue/src/Tooltip/stories/Tooltip.content.story.vue b/packages/radix-vue/src/Tooltip/stories/Tooltip.content.story.vue
@@ -62,7 +62,6 @@ const lastEvent = ref('')
             </TooltipTrigger>
             <Teleport to="body">
               <TooltipContent
-                as-child
                 :side-offset="5"
                 class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
                 @escape-key-down="lastEvent = '@on-escape-key-down'"

diff --git a/packages/radix-vue/src/Tooltip/stories/Tooltip.story.vue b/packages/radix-vue/src/Tooltip/stories/Tooltip.story.vue
@@ -9,25 +9,26 @@ const toggleState = ref(false)
 <template>
   <Story title="Tooltip/Default" :layout="{ type: 'single', iframe: true }">
     <Variant title="default">
-      <TooltipProvider>
-        <TooltipRoot v-model:open="toggleState">
-          <TooltipTrigger
-            class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
-          >
-            <Icon icon="radix-icons:plus" />
-          </TooltipTrigger>
-          <TooltipPortal>
-            <TooltipContent
-              as-child
-              :side-offset="5"
-              class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+      <div class="py-20">
+        <TooltipProvider>
+          <TooltipRoot v-model:open="toggleState">
+            <TooltipTrigger
+              class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
             >
-              Add to library
-              <TooltipArrow class="fill-white" />
-            </TooltipContent>
-          </TooltipPortal>
-        </TooltipRoot>
-      </TooltipProvider>
+              <Icon icon="radix-icons:plus" />
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipContent
+                :side-offset="5"
+                class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+              >
+                Add to library
+                <TooltipArrow class="fill-white" />
+              </TooltipContent>
+            </TooltipPortal>
+          </TooltipRoot>
+        </TooltipProvider>
+      </div>
     </Variant>
   </Story>
 </template>