components / 12
marked tooltip
a hint should feel like someone leaned over and penciled a note beside the thing you were already looking at.
shadcn
npx shadcn@latest add berkantay/cheez/marked-tooltiplive
hover or focusplayground
size
side
align
character
frame
arrow
ink
behavior
<MarkedTooltip
size="medium"
character="rushed"
frameMark="rounded-box"
arrowMark="pointer"
>
<MarkedTooltipTrigger>hover me</MarkedTooltipTrigger>
<MarkedTooltipContent side="top" align="center">
a quick margin note
</MarkedTooltipContent>
</MarkedTooltip>placement
collision awarefour directions
behavior
hover, focus, cursor, disabledstates
composition
first waits, siblings follow instantlyediting toolbar
pause on the first tool, then move across the set.
reference
provider, root, trigger, contentapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Provider | delay | number | 450 | shared opening delay |
| Provider | closeDelay | number | 40 | shared closing delay |
| Provider | timeout | number | 320 | instant-follow window |
| Root | open | boolean | — | controlled visibility |
| Root | defaultOpen | boolean | false | uncontrolled initial state |
| Root | onOpenChange | function | — | visibility callback with reason |
| Root | trackCursorAxis | "none" | "x" | "y" | "both" | "none" | follow pointer movement |
| Root | disableHoverablePopup | boolean | false | close when pointer leaves trigger |
| Root | disabled | boolean | false | disable tooltip behavior |
| Root | frameMark | CheezType | "rounded-box" | note boundary |
| Root | arrowMark | CheezType | "pointer" | directional pen arrow |
| Root | frameColor | string | "#35d9ff" | frame ink |
| Root | arrowColor | string | frame color | arrow ink |
| Root | triggerMark | CheezType | "short-underline" | hover and focus mark |
| Root | triggerColor | string | "#b7ff3c" | trigger ink |
| Root | character | "calm" | "rushed" | "chaotic" | "rushed" | drawing personality |
| Root | size | "small" | "medium" | "large" | "medium" | note scale |
| Trigger | delay | number | provider value | local opening delay |
| Trigger | closeDelay | number | provider value | local closing delay |
| Trigger | closeOnClick | boolean | true | dismiss after press |
| Trigger | nativeDisabled | boolean | false | disable button and tooltip |
| Content | side | "top" | "right" | "bottom" | "left" | "top" | preferred placement |
| Content | align | "start" | "center" | "end" | "center" | cross-axis alignment |
| Content | sideOffset | number | 14 | distance from trigger |
| Content | showArrow | boolean | true | directional pen arrow |
| Content | keepMounted | boolean | false | preserve portal contents |
behavior notes
- hover and keyboard focus both reveal the same hint
- Escape dismisses the active tooltip
- placement flips or shifts when it would leave the viewport
- provider timing makes adjacent toolbar hints feel immediate
- tooltips supplement accessible labels; they never replace them
- interactive content belongs in a popover, not a tooltip