A local-first note taking app
Update tooltip standards in design skill
Ethan Graf
(May 30, 2026, 6:18 PM EDT)
97402b88
f6531780
+24
+24
.opencode/skills/textile-design/components.md
+24
.opencode/skills/textile-design/components.md
···
53
53
- Outer chrome: `rounded-md border`, `bg-background`, `min-h-0` flex discipline for scroll.
54
54
- Prose links: `text-accent`; focus ring uses semantic accent via arbitrary property.
55
55
56
+
## Tooltip
57
+
58
+
**Reference:** `AppSidebar.tsx` (new-document buttons), `CommandPalette.tsx` (action rows)
59
+
60
+
Use the **native `title` attribute**. No custom CSS, no custom markup.
61
+
62
+
```tsx
63
+
<button title="New document in Habitat" ...>
64
+
```
65
+
66
+
```tsx
67
+
<div title={action.description} ...>
68
+
```
69
+
70
+
The browser renders the OS-native tooltip:
71
+
- macOS: dark translucent bubble below the element
72
+
- Windows/Linux: follows OS theme
73
+
74
+
**Rules:**
75
+
- Every interactive control that needs extra context gets a `title`
76
+
- Icon-only buttons **must** also have `aria-label` (screen readers don't read `title` reliably)
77
+
- Never build a custom tooltip with CSS/JS when `title` is sufficient
78
+
- If you need rich markup in the tooltip, use `aria-describedby` pointing at visually-hidden content rather than a custom floating element
79
+
56
80
## Theme switch
57
81
58
82
**Reference:** `SettingsModal.tsx`