Skip to content

Commit a24ec2f

Browse files
docs: tooltip closing transition
1 parent c645ce7 commit a24ec2f

File tree

2 files changed

+22
-0
lines changed

2 files changed

+22
-0
lines changed

docs/docs/examples/styling.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,26 @@ In summary, if you do it correctly you can use CSS specificity instead of `!impo
372372

373373
:::
374374

375+
### Customizing opening/closing animation
376+
377+
By default, the tooltip has a fade-in/fade-out transition when opening/closing, with a delay of 150ms for both.
378+
If you wish to change the delay for any of them, override the following CSS variables:
379+
380+
:::caution
381+
382+
Do not set `--rt-transition-closing-delay` to `0`. Doing so will result in the tooltip component being stuck (but not visible) on the DOM. This isn't itself a problem, but may lead to performance issues.
383+
384+
Set to `1ms` or a similar value instead if you with to disable the fade-out transition when closing.
385+
386+
:::
387+
388+
```css
389+
:root {
390+
--rt-transition-show-delay: 0.15s;
391+
--rt-transition-closing-delay: 0.15s;
392+
}
393+
```
394+
375395
### Disabling ReactTooltip CSS
376396

377397
ReactTooltip works seamlessly by automatically injecting CSS into your application. To disable this functionality, use the tooltip prop `disableStyleInjection`.

docs/docs/getting-started.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,5 +219,7 @@ For advanced styling, check [the examples](./examples/styling.mdx).
219219
--rt-color-warning: #f0ad4e;
220220
--rt-color-info: #337ab7;
221221
--rt-opacity: 0.9;
222+
--rt-transition-show-delay: 0.15s;
223+
--rt-transition-closing-delay: 0.15s;
222224
}
223225
```

0 commit comments

Comments
 (0)