feat: positioning examples

Author: codebender828

packages/c-tooltip/examples/simple-tooltip.vue

@@ -1,13 +1,40 @@
 <script setup lang="ts">
 import { CTooltip, CTooltipTrigger, CTooltipContent } from "../src"
-import { CTag } from "../../vue/src"
+import { CButton, CSimpleGrid } from "../../vue/src"
+
+const placements = [
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+  "right",
+  "right-start",
+  "right-end",
+]
 </script>
 
 <template>
-  <c-tooltip>
-    <c-tooltip-trigger>
-      <c-tag> Hover me </c-tag>
-    </c-tooltip-trigger>
-    <c-tooltip-content>Tooltip content</c-tooltip-content>
-  </c-tooltip>
+  <c-simple-grid
+    gap="16"
+    template-columns="repeat(3, auto)"
+    grid-auto-flow="row"
+  >
+    <c-tooltip
+      v-for="placement in placements"
+      :key="placement"
+      :positioning="{
+        placement: placement as any,
+      }"
+    >
+      <c-tooltip-trigger>
+        <c-button> {{ placement }} </c-button>
+      </c-tooltip-trigger>
+      <c-tooltip-content>Tooltip content {{ placement }}</c-tooltip-content>
+    </c-tooltip>
+  </c-simple-grid>
 </template>

packages/c-tooltip/src/c-tooltip-content.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, mergeProps } from "vue"
+import { Teleport, computed, defineComponent, mergeProps } from "vue"
 import { useTooltipContext } from "./tooltip.context"
 import {
   HTMLChakraProps,
@@ -26,15 +26,20 @@ export const CTooltipContent = defineComponent({
         styleConfig: mergedProps.value.styleConfig,
       })
     )
-    console.log("styles", themingProps.value)
     const styles = useStyleConfig("Tooltip", themingProps.value)
 
     return () => (
-      <CTooltipPositioner>
-        <chakra.div __css={styles.value} {...api.value.contentProps} {...attrs}>
-          {slots.default?.()}
-        </chakra.div>
-      </CTooltipPositioner>
+      <Teleport to="body">
+        <CTooltipPositioner>
+          <chakra.div
+            __css={styles.value}
+            {...api.value.contentProps}
+            {...attrs}
+          >
+            {slots.default?.()}
+          </chakra.div>
+        </CTooltipPositioner>
+      </Teleport>
     )
   },
 })