temetro/.agents/skills/coss/references/primitives/tooltip.md at 2c239fbd2777cd1344c4e75fff5a3cb36867d00a

mirror of https://github.com/temetro/temetro.git synced 2026-08-25 09:56:56 +00:00

Files

T

Khalid Abdi 929bec8f31 feat: AI-added records save with placeholders + "Added by AI" provenance

Stop blocking AI imports/proposals on missing non-critical fields. Records
the chat agent drafts now save with safe placeholders, auto-generated file
numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a
clinician can review/edit them later.

Backend:
- add `source` (manual|ai) column to patients/appointments/prescriptions
  (migration 0014) + canonical types, services, validation schemas
- relax patient/appointment validation: empty file number allowed, demographic
  + type/provider/initials fall back to placeholders (initials derived from name)
- patients.generateFileNumber() auto-assigns an MRN when one is missing
- proposeAppointment accepts a name when no file number resolves; AI commits +
  /api/ai/import stamp source="ai"

Frontend:
- `source` on Appointment/Patient/Prescription types; AI commits send source="ai"
- reusable <AiBadge> shown on the Patients table/detail and prescriptions list

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-14 19:27:17 +03:00

2.2 KiB

Raw Blame History

When to use

Short helper text on hover/focus for controls and icons.
Non-blocking contextual hints without modal behavior.

When NOT to use

If the content is interactive (links, buttons) -> use Popover instead.
If the content is rich (images, forms) -> use PreviewCard or Popover instead.
If the hint should persist until dismissed -> use Popover instead.

Install

npx shadcn@latest add @coss/tooltip

Manual deps from docs:

npm install @base-ui/react

Canonical imports

import {
  Tooltip,
  TooltipCreateHandle,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

Minimal pattern

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>

Patterns from coss particles

Portal forwarding: optional portalProps on TooltipPopup → Base UI Tooltip.Portal (keepMounted, container, …). See portal-props.md.

Key patterns

Tooltip on an icon-only button:

<Tooltip>
  <TooltipTrigger render={<Button size="icon" variant="ghost" aria-label="Settings" />}>
    <SettingsIcon aria-hidden="true" />
  </TooltipTrigger>
  <TooltipPopup>Settings</TooltipPopup>
</Tooltip>

Grouped tooltips (shared delay/provider):

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Item 1</TooltipTrigger>
    <TooltipPopup>Hint 1</TooltipPopup>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>Item 2</TooltipTrigger>
    <TooltipPopup>Hint 2</TooltipPopup>
  </Tooltip>
</TooltipProvider>

More examples

See p-tooltip-1 through p-tooltip-3 for basic, grouped, and animated tooltip patterns.

Common pitfalls

Placing interactive controls inside tooltip content (tooltip should stay informational).
Relying on tooltip as sole label for icon-only controls (still provide accessible name).
Using tooltip for long-form content that should be popover/dialog.

Useful particle references

grouped tooltips: p-tooltip-2
animated tooltips: p-tooltip-3
cross-overlay references: p-dialog-1, p-popover-1, p-menu-2

2.2 KiB Raw Blame History

coss Tooltip