Tooltip: Fixed content story

unovue · Jul 25, 2023 · a2193d9 · a2193d9
1 parent 204dc9a
commit a2193d9
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/packages/radix-vue/src/Tooltip/stories/Tooltip.content.story.vue b/packages/radix-vue/src/Tooltip/stories/Tooltip.content.story.vue
@@ -3,21 +3,19 @@ import { Icon } from "@iconify/vue";
 import { ref } from "vue";
 import { TooltipArrow, TooltipContent, TooltipRoot, TooltipTrigger } from "..";
 
-const toggleState = ref(false);
-
 const lastEvent = ref("");
 </script>
 
 <template>
   <Story title="Tooltip/Content" :layout="{ type: 'grid', width: '300px' }">
     <Variant title="Aria Label">
       <div class="grid w-full h-28 place-content-center">
-        <TooltipRoot v-model:open="toggleState">
+        <TooltipRoot>
           <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>
-          <Teleport to="Aria label">
+          <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]">
               <ul>
@@ -42,12 +40,12 @@ const lastEvent = ref("");
           <template v-else> No event has been emitted yet </template>
         </p>
 
-        <TooltipRoot v-model:open="toggleState">
+        <TooltipRoot>
           <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>
-          <Teleport to="Aria label">
+          <Teleport to="body">
             <TooltipContent as-child :side-offset="5" @escape-key-down="lastEvent = '@on-escape-key-down'"
               @pointer-down-outside="lastEvent = '@pointer-down-outside'"
               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]">