Riposte

Tooltip

A small floating hint anchored to its trigger — the label on an icon button, the full text of a truncated cell, a hint on a disabled control. Unlike DaisyUI’s…

A small floating hint anchored to its trigger — the label on an icon button, the full text of a truncated cell, a hint on a disabled control. Unlike DaisyUI’s pure-CSS tooltip (a string shown on hover only), salle’s is JS-driven: the tip is rich content (any VNode), it can be controlled, it opens on hover, focus, or click, and it honours show/hide delays. The trigger is the children:

Tooltip(tip = span("Delete this file"))(
  Button("🗑", color = Color.Error),
)

placement (TooltipPlacement.Top / Bottom / Left / Right) chooses the side; color tints the bubble. trigger selects how it appears:

  • TooltipTrigger.Hover (default) — pointer hover and keyboard focus, the accessible default.
  • TooltipTrigger.Focus — focus only.
  • TooltipTrigger.Click — toggles on click and dismisses on an outside click.

Escape dismisses any open tooltip. It can be uncontrolled (defaultOpen seeds it) or controlled (pass open = Some(...) and react to onOpenChange). mouseEnterDelay / mouseLeaveDelay (ms) debounce show/hide so a quick pass doesn’t flash it; disabled suppresses it entirely; exitMs is the fade-out duration before it unmounts — keep it in step with the skin’s transition.

Mounting goes through the core usePresence hook, so the close transition is seen before unmount. The tip is a role="tooltip" element referenced by the wrapper’s aria-describedby while shown. (riposte has no child-cloning, so the relationship sits on the wrapper rather than the trigger element itself; a consumer that needs aria-describedby on the control directly can set it themselves.) State is mirrored to data-*.

Search

Esc
to navigate to open Esc to close