From 74dd6cdc19111b1e92d46bdeb28fb5bf81bf8afa Mon Sep 17 00:00:00 2001
From: Christopher Woolum <christopher.woolum@gmail.com>
Date: Wed, 31 Jul 2024 20:45:43 -0700
Subject: [PATCH] fix: remove animations form tooltip docs and fix placement
 example

---
 .../routes/docs/headless/tooltip/examples/placement.tsx  | 2 +-
 apps/website/src/routes/docs/headless/tooltip/index.mdx  | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/routes/docs/headless/tooltip/examples/placement.tsx b/apps/website/src/routes/docs/headless/tooltip/examples/placement.tsx
index e6bc9a3e2..32362498f 100644
--- a/apps/website/src/routes/docs/headless/tooltip/examples/placement.tsx
+++ b/apps/website/src/routes/docs/headless/tooltip/examples/placement.tsx
@@ -24,7 +24,7 @@ export default component$(() => {
         <option value="left">Left</option>
       </select>
 
-      <Tooltip.Root gutter={4} flip placement={placement.value}>
+      <Tooltip.Root key={placement.value} gutter={4} flip placement={placement.value}>
         <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
         <Tooltip.Panel
           aria-label={`Tooltip content on the ${placement.value}`}
diff --git a/apps/website/src/routes/docs/headless/tooltip/index.mdx b/apps/website/src/routes/docs/headless/tooltip/index.mdx
index ec4b02ed8..0bf2b191f 100644
--- a/apps/website/src/routes/docs/headless/tooltip/index.mdx
+++ b/apps/website/src/routes/docs/headless/tooltip/index.mdx
@@ -118,11 +118,14 @@ Use the `data-open` and `data-closed` attributes on the `<Tooltip.Panel>` compon
 
 ### Cross-browser Animations
 
-Entry and exit animations have often been a frustrating experience in web development, especially trying to animate between `display: none`, a discrete property.
+{/\* Entry and exit animations have often been a frustrating experience in web development, especially trying to animate between `display: none`, a discrete property.
 
 Luckily, the Qwik UI team has done an excellent job of managing animations on polyfill browsers for you using the `data-*` attributes.
 
 <CodeSnippet name="animation.css" />
+*/}
+
+> Animations are not currently available in the Tooltip component. We are working on a solution to provide a more seamless experience. In the meantime, you can still use transitions.
 
 ## Tooltip Behavior
 
@@ -170,7 +173,7 @@ If Tailwind is the framework of choice, then styles can be added using the [arbi
 
 > The arbitrary variant can be customized/abstracted even further by [adding a variant](https://tailwindcss.com/docs/plugins#adding-variants) as a plugin in the tailwind config.
 
-## Animations
+{/\* ## Animations
 
 <Showcase name="animation" />
 
@@ -182,7 +185,7 @@ To use an animation, add the following CSS classes to the component.
 
 Here's the CSS imported from the example:
 
-<CodeSnippet name="animation.css" />
+<CodeSnippet name="animation.css" /> */}
 
 ### Transition declarations