Zaniah Docs
Browse documentation

DocsOverlays

Tooltips and popovers

Place short help text or contextual content near an anchor.

Import

Load the optional component layer before using the examples below.

Ruby
require "zaniah/ui"

Tooltip

A tooltip is brief, supplemental text. It is not a replacement for a visible label.

Rendered example
Tooltip positioned below its anchor in the dark theme.
Rendered by Zaniah's headless backend.
Ruby
anchor = Zaniah::Bounds.new(280, 80, 80, 32)
Zaniah::UI::Tooltip.new("Helpful text",
  anchor: anchor, side: :bottom)

Popover and hover card

Use Popover for richer content. HoverCard opens from pointer hover or keyboard focus after a delay.

Rendered example
Popover with contextual content beside its anchor.
Rendered by Zaniah's headless backend.
Ruby
Zaniah::UI::Popover.new(
  Zaniah::UI::Label.new("More information"),
  anchor: anchor, side: :right)
Zaniah::UI::HoverCard.new(
  Zaniah::UI::Label.new("Keyboard shortcuts"),
  anchor: anchor)

API summary

Constructor options and behaviors are drawn from the component reference.

ComponentConstructor and methodsVariants or behavior
Tooltip(text, anchor:, side:, open:)top/bottom/left/right
Popover(content, anchor:, side:, width:, height:, open:, modal:)flipped and viewport-clamped
HoverCard(content, anchor:, open_delay:, close_delay:)hover or focus opens after a delay; non-modal

Accessibility

HoverCard also opens from keyboard focus. Keep interactive controls out of a simple Tooltip.

ComponentSemantic role
Tooltiptooltip
Popovergroup
HoverCarddialog