remove tooltipportal

unovue · Jul 25, 2023 · f04b430 · f04b430
1 parent 6b66327
commit f04b430
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/docs/components/demo/Tooltip/index.vue b/docs/components/demo/Tooltip/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow } from "radix-vue";
+import { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow } from "radix-vue";
 import { Icon } from "@iconify/vue";
 </script>
 
@@ -10,7 +10,7 @@ import { Icon } from "@iconify/vue";
     >
       <Icon icon="radix-icons:plus" />
     </TooltipTrigger>
-    <TooltipPortal>
+    <Teleport>
       <TooltipContent
         asChild
         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-grass11 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]"
@@ -21,6 +21,6 @@ import { Icon } from "@iconify/vue";
           <TooltipArrow class="fill-white" size="8" />
         </ul>
       </TooltipContent>
-    </TooltipPortal>
+    </Teleport>
   </TooltipRoot>
 </template>
diff --git a/docs/components/home/demos/TooltipDemo.vue b/docs/components/home/demos/TooltipDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow } from "radix-vue";
+import { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow } from "radix-vue";
 import { Icon } from "@iconify/vue";
 import { ref } from "vue";
 
@@ -22,7 +22,7 @@ const toggleState = ref(false);
     >
       <Icon icon="radix-icons:plus" />
     </TooltipTrigger>
-    <TooltipPortal>
+    <Teleport>
       <TooltipContent
         asChild
         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]"
@@ -32,6 +32,6 @@ const toggleState = ref(false);
           <TooltipArrow class="bg-white" size="8" />
         </ul>
       </TooltipContent>
-    </TooltipPortal>
+    </Teleport>
   </TooltipRoot>
 </template>
diff --git a/docs/content/components/tooltip.md b/docs/content/components/tooltip.md
@@ -45,18 +45,18 @@ Import all parts and piece them together.
 
 ```vue
 <script setup lang="ts">
-import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow } from "radix-vue";
+import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow } from "radix-vue";
 </script>
 
 <template>
   <TooltipProvider>
     <TooltipRoot>
       <TooltipTrigger />
-      <TooltipPortal>
+      <Tooltip>
         <TooltipContent>
           <TooltipArrow />
         </TooltipContent>
-      </TooltipPortal>
+      </Tooltip>
     </TooltipRoot>
   </TooltipProvider>
 </template>