| UI or UX | UI + UX - Required-content-hidden-in-tooltip anti-pattern | UI + UX - Short noninteractive description tied to a trigger | UI + UX - Contextual in-flow feedback | UI + UX - Single in-place reveal for optional supporting content | UI + UX - Small anchored contextual overlay |
| UI guidance | Replace tooltip-only required information with visible text, inline message, validation copy, details disclosure, or a stable popover that remains available while users act. | Render a tooltip as a small text-only bubble visually tied to a focusable trigger, with concise copy, readable contrast, stable placement, and an optional arrow that points to the target. | Render the message inside the same row, card, panel, form section, or task region that it describes, with a clear tone, concise title, body text, and at most one local action or detail disclosure. | Render one clearly labelled disclosure control with a visible summary that predicts the revealed content, followed immediately by the hidden explanation, example, or supporting note. | Render a popover as a compact surface visually tied to the trigger, field, selection, or object that opened it, with a clear title or labelled content when the body is more than a short sentence. |
| UX guidance | Use this anti-pattern during review when users must discover hidden tooltip text to answer a field, choose safely, avoid validation failure, understand a legal consequence, or unblock a disabled action. | Help the person reach a clear task outcome. | Use inline messages when users need contextual feedback while continuing nearby work, such as a row-level warning, section-level success, local policy note, or task-specific next step. | Use disclosure details when a short explanation, example, eligibility note, or calculation help is useful to some users but would slow most users if always visible. | Make opening, light dismissal, Escape, outside click, anchor scrolling, focus order, and focus return predictable so the surface feels contextual rather than interruptive. |
| Good UI | A document upload step lists passport or driving licence as acceptable evidence in visible help text and opens details for examples. | A labelled Archive icon button receives focus and shows a short tooltip that says Moves this report to archived reports. | An invoice row shows Missing billing contact directly beneath the affected customer with Add contact as the only action. | A tax form shows a summary labelled How we calculate household income, revealing a short worked example below the income field. | A Due date button in a task row opens a small popover beside the field with Today, Tomorrow, Friday, a custom date field, and a visible close control. |
| Bad UI | A question-mark icon beside Tax ID hides the only accepted format in a hover tooltip. | The tooltip appears only on mouse hover. | A section message contains a full support workflow, several links, and unrelated settings controls. | A page uses ten Details controls as section navigation, with some triggers revealing text and others opening pages. | Escape closes the layer but focus disappears or jumps to the top of the page. |
| Good UX | A mobile user can read required document rules before selecting files and can reopen optional examples in a details disclosure. | Tabbing to Archive keeps focus on the button, shows a short description, Escape hides it, and focus remains on Archive. | A successful send message remains beside the invoice long enough to copy the generated reference. | A user opens the calculation help, reads one example, closes it, and the nearby income field value remains unchanged. | Opening the due-date popover moves focus to the first date option, choosing Tomorrow updates the field, closes the layer, and returns focus to the Due date trigger. |
| Bad UX | A slow reader opens a tooltip, moves focus to type, and loses the only deadline consequence. | A user presses Escape to hide the tooltip and focus jumps to the top of the page. | The message disappears like a toast even though users still need the invoice reference. | Users miss a deadline because the deadline is hidden inside a collapsed disclosure with a vague label. | The user scrolls and the popover stays in the old position, so it appears to describe the wrong field. |
| Best fit | Use this anti-pattern entry to review forms, checkout, applications, settings, data tables, eligibility flows, upload flows, and disabled actions where required information is hidden in a tooltip. | A compact control needs a brief supplemental explanation. | A visible object or section has local status, warning, success, or next-step information. | One short supporting explanation belongs in place beside the content it clarifies. | A local control needs brief explanatory content or light editing while page context remains visible. |
| Avoid when | The required information is already visible, and the tooltip only repeats or clarifies it. | The text is the only label or action name. | The message is a one-field validation correction. | The content is required to make the right decision. | The content is essential instruction that must remain visible for task completion. |
| Required state | Default state with the requirement visible, summarized, or explicitly openable before users act. | Keyboard focus state where the tooltip appears and focus remains on the trigger. | Informational inline message attached to the relevant object or section. | Closed state with a specific summary label and hidden supporting content. | Closed trigger state with visible label, icon name, or field relationship. |
| Accessibility burden | Keep required content in normal reading order or behind an explicit, keyboard-reachable control that remains open long enough to use. | Use tooltip text as a description with aria-describedby when it supplements the trigger. | Keep the message in the reading order near the context it describes. | Use native summary behavior or a button that exposes expanded and collapsed state. | Use a real button or equivalent control as the trigger whenever possible. |
| Common misuse | Putting accepted document types only in a help-icon tooltip. | Using hover-only tooltip text as the only label for an icon button. | Using an inline message for a single field error that should be connected to that input. | Using vague summaries such as More, Details, or Click here. | Using a popover as a hidden modal, drawer, sheet, command menu, or full workflow. |