| 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. | Use tooltips to add a brief description on focus or hover without asking users to open a separate layer or change task mode. | 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. | Use a popover when users need local context, clarification, or a small edit without losing their place in the page. |
| Good UI | A tax ID field shows Format: 9 digits, no spaces directly under the label, with a tooltip only repeating where to find it. | 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. | A mystery icon has no label and the only explanation is a hover-only tooltip that never appears for touch users. | A vague Important message appears above the whole page with no object reference. | A form hides the only eligibility rule under More details with no hint that it affects the answer. | A large floating panel appears in the middle of the screen with no arrow, no title, no trigger relationship, and hidden controls below the fold. |
| 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. | Users can reveal why export is limited, add the missing contact, and see the local message resolve without losing table context. | 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 touch user cannot open the hover tooltip and submits the wrong document. | 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 tooltip is genuinely supplemental and the task remains complete without 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. | Resting trigger state with a visible or accessible name that works without the tooltip. | Neutral local context with no message. | Closed state with a specific summary label and hidden supporting content. | Closed trigger state with visible label, icon name, or field relationship. |
| Accessibility burden | Do not rely on hover-only or title-only behavior for required information. | 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. |