Skip to content

Commit 74dd6cd

Browse files
committed
fix: remove animations form tooltip docs and fix placement example
1 parent e0ea1e2 commit 74dd6cd

File tree

2 files changed

+7
-4
lines changed

2 files changed

+7
-4
lines changed

apps/website/src/routes/docs/headless/tooltip/examples/placement.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default component$(() => {
2424
<option value="left">Left</option>
2525
</select>
2626

27-
<Tooltip.Root gutter={4} flip placement={placement.value}>
27+
<Tooltip.Root key={placement.value} gutter={4} flip placement={placement.value}>
2828
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
2929
<Tooltip.Panel
3030
aria-label={`Tooltip content on the ${placement.value}`}

apps/website/src/routes/docs/headless/tooltip/index.mdx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,14 @@ Use the `data-open` and `data-closed` attributes on the `<Tooltip.Panel>` compon
118118

119119
### Cross-browser Animations
120120

121-
Entry and exit animations have often been a frustrating experience in web development, especially trying to animate between `display: none`, a discrete property.
121+
{/\* Entry and exit animations have often been a frustrating experience in web development, especially trying to animate between `display: none`, a discrete property.
122122

123123
Luckily, the Qwik UI team has done an excellent job of managing animations on polyfill browsers for you using the `data-*` attributes.
124124

125125
<CodeSnippet name="animation.css" />
126+
*/}
127+
128+
> 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.
126129
127130
## Tooltip Behavior
128131

@@ -170,7 +173,7 @@ If Tailwind is the framework of choice, then styles can be added using the [arbi
170173

171174
> 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.
172175
173-
## Animations
176+
{/\* ## Animations
174177

175178
<Showcase name="animation" />
176179

@@ -182,7 +185,7 @@ To use an animation, add the following CSS classes to the component.
182185

183186
Here's the CSS imported from the example:
184187

185-
<CodeSnippet name="animation.css" />
188+
<CodeSnippet name="animation.css" /> */}
186189

187190
### Transition declarations
188191

0 commit comments

Comments
 (0)