Tooltips
A tooltip is a small indicator — a question mark, info glyph, dot, pulse, or a NEW/BETA badge — anchored next to any element. Hovering or clicking it opens a popover with a title, body, and an optional CTA that can open a link or even start a tour. Unlike a tour, a tooltip just sits there until it's needed. The anchors below show the id selector to attach a tooltip to in the StepsKit dashboard.
What it looks like
The five indicator styles, and an open tooltip: a question-mark glyph next to a field with its popover and a CTA.
Form fields
Settings forms are the classic tooltip habitat — a question-mark glyph next to the label that explains what the field does.
#sk-tt-workspace-name— “what is a workspace?” hover tooltip#sk-tt-api-key— “keep this secret” with a docs-link CTA#sk-tt-weekly-digest— NEW badge on a fresh setting
Dense UI
Tables and destructive actions — places where a hover explanation beats a paragraph of UI copy.
| Key | Token | Status |
|---|---|---|
| Production | sk_live_4f2a… | Active |
| Staging | sk_test_9c1b… | Active |
| Legacy import | sk_live_77d0… | Revoked |
#sk-tt-delete#sk-tt-status-header— column-header glyph explaining the statuses#sk-tt-status-badge— tooltip on a single badge#sk-tt-delete— click-to-open “careful, irreversible” warning