#143
Custom delay
Three tooltips with different open delays on buttons: instant, default and slow.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Custom delay" pattern (@codeatlasdev/ui demo #143, display/tooltip) in my app.
Call get_demo({ ids: ["#143"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Tuning how quickly a tooltip appears, instant for dense toolbars and slower for hints that should not flash.
Keep these library parts, with the props and tokens the demo uses:
- Tooltip, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `delay={0}` on the Instant button with `content="No delay (delay=0)"`
- No `delay` prop on the Default button, `content="Default delay (500ms)"`
- `delay={1000}` on the Slow button
- Each trigger uses `{#snippet triggerChild(props)}` with `<Button variant="glass" {...props}>`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `delay={0}` on the Instant button with `content="No delay (delay=0)"`
- No `delay` prop on the Default button, `content="Default delay (500ms)"`
- `delay={1000}` on the Slow button
- Each trigger uses `{#snippet triggerChild(props)}` with `<Button variant="glass" {...props}>`
Related
Loading source.