spoko-design-system 1.18.1 → 1.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.json +48 -48
- package/.github/dependabot.yml +11 -11
- package/.github/todo.yml +3 -3
- package/.github/workflows/claude.yml +37 -37
- package/.github/workflows/code-quality.yml +72 -72
- package/.github/workflows/deploy.yml +43 -43
- package/.husky/README.md +41 -41
- package/.husky/commit-msg +1 -1
- package/.husky/pre-commit +40 -40
- package/.prettierignore +14 -14
- package/.prettierrc +30 -30
- package/.stackblitzrc +5 -5
- package/.vscode/extensions.json +4 -4
- package/.vscode/launch.json +11 -11
- package/.vscode/settings.json +21 -21
- package/CHANGELOG.md +462 -450
- package/CLAUDE.md +268 -268
- package/LICENSE +21 -21
- package/README.md +303 -132
- package/TOOLTIPS.md +236 -236
- package/astro.config.mjs +84 -84
- package/commitlint.config.js +3 -3
- package/dev-dist/sw.js +91 -91
- package/dev-dist/workbox-c676b6d3.js +3391 -3391
- package/eslint.config.js +70 -70
- package/icon.config.ts +348 -348
- package/index.ts +78 -78
- package/package.json +160 -160
- package/public/arrow-bottom.svg +7 -7
- package/public/fonts/lg.svg +53 -53
- package/public/fonts/vwhead-bold-demo.html +549 -549
- package/public/fonts/vwhead-regular-demo.html +549 -549
- package/public/fonts/vwtext-bold-demo.html +549 -549
- package/public/fonts/vwtext-regular-demo.html +549 -549
- package/public/github.svg +3 -3
- package/public/grid_dot.svg +4 -4
- package/public/linkedin.svg +44 -44
- package/public/make-scrollable-code-focusable.js +3 -3
- package/public/pagefind.yml +3 -3
- package/public/polo.blue.svg +29 -29
- package/public/spoko.space.svg +71 -71
- package/public/twitter.svg +46 -46
- package/renovate.json +6 -6
- package/sandbox.config.json +11 -11
- package/sonar-project.properties +26 -26
- package/src/components/Category/CategoryDetails.astro +46 -18
- package/src/components/Jumbotron/variants/Hero.astro +9 -1
- package/src/components/Jumbotron/variants/PostSplit.astro +8 -0
- package/src/pages/components/badges.mdx +57 -57
- package/src/pages/components/breadcrumbs.mdx +139 -139
- package/src/pages/components/buttons.mdx +359 -359
- package/src/pages/components/card.mdx +294 -294
- package/src/pages/components/carousel.mdx +62 -62
- package/src/pages/components/copyright.mdx +42 -42
- package/src/pages/components/details-list.mdx +207 -207
- package/src/pages/components/features-list.mdx +37 -37
- package/src/pages/components/flags.mdx +49 -49
- package/src/pages/components/fuck-russia.mdx +39 -39
- package/src/pages/components/hand-drive.mdx +78 -78
- package/src/pages/components/headline.mdx +337 -337
- package/src/pages/components/image.mdx +513 -513
- package/src/pages/components/input.mdx +367 -367
- package/src/pages/components/jumbotron.mdx +530 -530
- package/src/pages/components/modal.mdx +212 -212
- package/src/pages/components/post-header.mdx +64 -64
- package/src/pages/components/pr-code.mdx +213 -213
- package/src/pages/components/product-engine.mdx +418 -418
- package/src/pages/components/product-number.mdx +58 -58
- package/src/pages/components/product-tile.mdx +51 -51
- package/src/pages/components/quote.mdx +33 -33
- package/src/pages/components/slimbanner.mdx +260 -260
- package/src/pages/components/table.mdx +108 -108
- package/src/pages/core/colors.mdx +21 -21
- package/src/pages/core/grid.mdx +193 -193
- package/src/pages/core/introduction.mdx +77 -77
- package/src/pages/core/tooltips.mdx +491 -491
- package/src/pages/patterns/introduction.mdx +60 -60
- package/src/styles/_variables.scss +70 -70
- package/tailwind.config.cjs +8 -8
- package/tsconfig.json +28 -28
- package/uno-config/index.ts +269 -269
- package/uno-config/theme/breakpoints.ts +9 -9
- package/uno-config/theme/colors.ts +65 -65
- package/uno-config/theme/dimensions.ts +17 -17
- package/uno-config/theme/effects.ts +14 -14
- package/uno-config/theme/grid.ts +10 -10
- package/uno-config/theme/index.ts +26 -26
- package/uno-config/theme/shortcuts/buttons.ts +53 -53
- package/uno-config/theme/shortcuts/components.ts +124 -124
- package/uno-config/theme/shortcuts/index.ts +20 -20
- package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
- package/uno-config/theme/shortcuts/layout.ts +75 -75
- package/uno-config/theme/typography.ts +29 -29
- package/uno.config.ts +2 -2
|
@@ -1,491 +1,491 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "Tooltips"
|
|
3
|
-
layout: "../../layouts/MainLayout.astro"
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# Tooltips
|
|
7
|
-
|
|
8
|
-
A complete tooltip system built on [Tippy.js](https://atomiks.github.io/tippyjs/) with custom SDS styling and automatic initialization.
|
|
9
|
-
|
|
10
|
-
## Features
|
|
11
|
-
|
|
12
|
-
- 🎨 **Custom SDS Theme** - Matches design system colors
|
|
13
|
-
- ⚡ **Performance Optimized** - Delegation pattern handles thousands of tooltips efficiently
|
|
14
|
-
- 🔄 **Astro View Transitions** - Automatic re-initialization on navigation
|
|
15
|
-
- 🎯 **Simple API** - Just add a data attribute
|
|
16
|
-
- 📦 **Bundled** - No need to install tippy.js separately in your project
|
|
17
|
-
- 🔍 **SEO Friendly** - Content rendered in HTML, enhanced progressively
|
|
18
|
-
|
|
19
|
-
## Installation
|
|
20
|
-
|
|
21
|
-
### Step 1: Create a tooltip initialization script
|
|
22
|
-
|
|
23
|
-
In your project, create a script file (e.g., `src/scripts/tooltips.ts`):
|
|
24
|
-
|
|
25
|
-
```ts
|
|
26
|
-
// src/scripts/tooltips.ts
|
|
27
|
-
import 'spoko-design-system/scripts/tooltips';
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
That's it! This single import includes:
|
|
31
|
-
- ✅ Tippy.js library
|
|
32
|
-
- ✅ Base Tippy.js CSS
|
|
33
|
-
- ✅ SDS custom theme CSS
|
|
34
|
-
- ✅ Auto-initialization logic
|
|
35
|
-
- ✅ Astro View Transitions support
|
|
36
|
-
|
|
37
|
-
### Step 2: Import in your layout
|
|
38
|
-
|
|
39
|
-
Add the script to your main layout's `<head>`:
|
|
40
|
-
|
|
41
|
-
```astro
|
|
42
|
-
---
|
|
43
|
-
// src/layouts/BaseLayout.astro or HeadCommon.astro
|
|
44
|
-
---
|
|
45
|
-
|
|
46
|
-
<head>
|
|
47
|
-
<!-- ... other head elements -->
|
|
48
|
-
<script src="/src/scripts/tooltips.ts"></script>
|
|
49
|
-
</head>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Usage
|
|
53
|
-
|
|
54
|
-
### Basic Tooltip
|
|
55
|
-
|
|
56
|
-
Add the `data-tippy-content` attribute to any element:
|
|
57
|
-
|
|
58
|
-
<div class="component-preview">
|
|
59
|
-
<div class="bg-white p-6 w-full">
|
|
60
|
-
<button
|
|
61
|
-
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
|
62
|
-
data-tippy-content="This is a basic tooltip">
|
|
63
|
-
Hover over me
|
|
64
|
-
</button>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
|
|
68
|
-
```astro
|
|
69
|
-
<button data-tippy-content="This is a basic tooltip">
|
|
70
|
-
Hover over me
|
|
71
|
-
</button>
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### HTML Content
|
|
75
|
-
|
|
76
|
-
Tooltips support HTML content:
|
|
77
|
-
|
|
78
|
-
<div class="component-preview">
|
|
79
|
-
<div class="bg-white p-6 w-full">
|
|
80
|
-
<span
|
|
81
|
-
class="underline decoration-dotted cursor-help"
|
|
82
|
-
data-tippy-content="<strong>Bold text</strong> and <em>italic text</em>">
|
|
83
|
-
HTML tooltip
|
|
84
|
-
</span>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
|
|
88
|
-
```astro
|
|
89
|
-
<span data-tippy-content="<strong>Bold text</strong> and <em>italic text</em>">
|
|
90
|
-
HTML tooltip
|
|
91
|
-
</span>
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### Structured Tooltips
|
|
95
|
-
|
|
96
|
-
For complex tooltips with headers and multiple sections:
|
|
97
|
-
|
|
98
|
-
<div class="component-preview">
|
|
99
|
-
<div class="bg-white p-6 w-full">
|
|
100
|
-
<span
|
|
101
|
-
class="underline decoration-dotted cursor-help text-blue-600"
|
|
102
|
-
data-tippy-content='<div class="tooltip-header"><strong>Product Details</strong></div><div class="tooltip-specs"><div class="tooltip-row"><span class="tooltip-label">SKU:</span><span class="tooltip-value">12345</span></div><div class="tooltip-row"><span class="tooltip-label">Weight:</span><span class="tooltip-value">2.5 kg</span></div></div>'>
|
|
103
|
-
Product Info
|
|
104
|
-
</span>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
```astro
|
|
109
|
-
<span data-tippy-content={`
|
|
110
|
-
<div class="tooltip-header">
|
|
111
|
-
<strong>Product Details</strong>
|
|
112
|
-
</div>
|
|
113
|
-
<div class="tooltip-specs">
|
|
114
|
-
<div class="tooltip-row">
|
|
115
|
-
<span class="tooltip-label">SKU:</span>
|
|
116
|
-
<span class="tooltip-value">12345</span>
|
|
117
|
-
</div>
|
|
118
|
-
<div class="tooltip-row">
|
|
119
|
-
<span class="tooltip-label">Weight:</span>
|
|
120
|
-
<span class="tooltip-value">2.5 kg</span>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
`}>
|
|
124
|
-
Product Info
|
|
125
|
-
</span>
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
## Components with Built-in Tooltips
|
|
129
|
-
|
|
130
|
-
These SDS components automatically include tooltips:
|
|
131
|
-
|
|
132
|
-
### ProductEngine & ProductEngines
|
|
133
|
-
|
|
134
|
-
Engine codes with detailed specification tooltips:
|
|
135
|
-
|
|
136
|
-
```astro
|
|
137
|
-
import { ProductEngines } from 'spoko-design-system';
|
|
138
|
-
|
|
139
|
-
<ProductEngines engines={product.part_engines} />
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
See [ProductEngine documentation](/components/product-engine) for details.
|
|
143
|
-
|
|
144
|
-
### ProductCodes
|
|
145
|
-
|
|
146
|
-
PR codes with description tooltips (when available):
|
|
147
|
-
|
|
148
|
-
```astro
|
|
149
|
-
import { ProductCodes } from 'spoko-design-system';
|
|
150
|
-
|
|
151
|
-
<ProductCodes prcodes={product.pr_codes} isPdp={true} />
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
## Styling
|
|
155
|
-
|
|
156
|
-
### SDS Theme
|
|
157
|
-
|
|
158
|
-
The default SDS theme uses these design tokens:
|
|
159
|
-
|
|
160
|
-
| Property | Value | Token |
|
|
161
|
-
|----------|-------|-------|
|
|
162
|
-
| Background | `#f3f4f6` | `neutral-lightest` |
|
|
163
|
-
| Text Color | `#1e293b` | `slate-darkest` |
|
|
164
|
-
| Border | `#e5e7eb` | `neutral-lighter` |
|
|
165
|
-
| Header Background | `#001e50` | `accent-deepBlue` |
|
|
166
|
-
| Max Width | `280px` | - |
|
|
167
|
-
| Border Radius | `0.5rem` | - |
|
|
168
|
-
|
|
169
|
-
### Custom Styling
|
|
170
|
-
|
|
171
|
-
To customize the tooltip appearance, override these CSS classes:
|
|
172
|
-
|
|
173
|
-
```css
|
|
174
|
-
/* Main tooltip box */
|
|
175
|
-
.tippy-box[data-theme~='sds'] {
|
|
176
|
-
background-color: your-color !important;
|
|
177
|
-
color: your-text-color !important;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
/* Tooltip content area */
|
|
181
|
-
.tippy-box[data-theme~='sds'] .tippy-content {
|
|
182
|
-
padding: 0.5rem 0.75rem;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
/* Structured tooltip header */
|
|
186
|
-
.tippy-box[data-theme~='sds'] .tooltip-header {
|
|
187
|
-
background-color: your-header-color;
|
|
188
|
-
color: white;
|
|
189
|
-
padding: 0.375rem 0.5rem;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
/* Tooltip specs rows */
|
|
193
|
-
.tippy-box[data-theme~='sds'] .tooltip-row {
|
|
194
|
-
display: flex;
|
|
195
|
-
justify-content: space-between;
|
|
196
|
-
padding: 0.25rem 0;
|
|
197
|
-
}
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
### Available CSS Classes
|
|
201
|
-
|
|
202
|
-
For structured tooltips:
|
|
203
|
-
|
|
204
|
-
| Class | Purpose |
|
|
205
|
-
|-------|---------|
|
|
206
|
-
| `.tooltip-header` | Dark blue header section |
|
|
207
|
-
| `.tooltip-specs` | Container for specification rows |
|
|
208
|
-
| `.tooltip-row` | Single specification row |
|
|
209
|
-
| `.tooltip-label` | Left-aligned label text |
|
|
210
|
-
| `.tooltip-value` | Right-aligned value text |
|
|
211
|
-
|
|
212
|
-
## Configuration
|
|
213
|
-
|
|
214
|
-
The tooltip system uses these default settings:
|
|
215
|
-
|
|
216
|
-
```ts
|
|
217
|
-
{
|
|
218
|
-
target: '[data-tippy-content]', // Target selector
|
|
219
|
-
allowHTML: true, // Allow HTML in content
|
|
220
|
-
theme: 'sds', // SDS custom theme
|
|
221
|
-
placement: 'top', // Default placement
|
|
222
|
-
arrow: true, // Show arrow
|
|
223
|
-
animation: 'shift-away', // Animation style
|
|
224
|
-
duration: [200, 150], // [show, hide] duration (ms)
|
|
225
|
-
maxWidth: 280, // Maximum width (px)
|
|
226
|
-
}
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
To customize, you can create your own initialization:
|
|
230
|
-
|
|
231
|
-
```ts
|
|
232
|
-
// src/scripts/custom-tooltips.ts
|
|
233
|
-
import { delegate } from 'tippy.js';
|
|
234
|
-
import 'tippy.js/dist/tippy.css';
|
|
235
|
-
import 'spoko-design-system/styles/tippy-theme.css';
|
|
236
|
-
|
|
237
|
-
export function initCustomTooltips() {
|
|
238
|
-
delegate('body', {
|
|
239
|
-
target: '[data-tippy-content]',
|
|
240
|
-
allowHTML: true,
|
|
241
|
-
theme: 'sds',
|
|
242
|
-
placement: 'bottom', // Changed from 'top'
|
|
243
|
-
maxWidth: 400, // Wider tooltips
|
|
244
|
-
// ... other options
|
|
245
|
-
});
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
// Initialize
|
|
249
|
-
if (typeof document !== 'undefined') {
|
|
250
|
-
document.addEventListener('astro:page-load', () => {
|
|
251
|
-
initCustomTooltips();
|
|
252
|
-
});
|
|
253
|
-
}
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
## Technical Details
|
|
257
|
-
|
|
258
|
-
### Delegation Pattern
|
|
259
|
-
|
|
260
|
-
The tooltip system uses Tippy.js's delegation pattern:
|
|
261
|
-
|
|
262
|
-
- **Single event listener** on `body` handles all tooltips
|
|
263
|
-
- **No re-initialization needed** when DOM changes
|
|
264
|
-
- **Efficient memory usage** - scales to thousands of tooltips
|
|
265
|
-
- **Dynamic content support** - works with client-side rendering
|
|
266
|
-
|
|
267
|
-
### How It Works
|
|
268
|
-
|
|
269
|
-
1. One global event listener watches for mouseenter/focus on `[data-tippy-content]` elements
|
|
270
|
-
2. Tooltip instance created on-demand when user hovers
|
|
271
|
-
3. Instance destroyed when tooltip hides
|
|
272
|
-
4. No memory leaks from orphaned instances
|
|
273
|
-
|
|
274
|
-
### Astro View Transitions
|
|
275
|
-
|
|
276
|
-
The system automatically handles Astro's View Transitions:
|
|
277
|
-
|
|
278
|
-
```ts
|
|
279
|
-
document.addEventListener('astro:page-load', () => {
|
|
280
|
-
initTooltips();
|
|
281
|
-
});
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
This ensures tooltips work correctly after client-side navigation.
|
|
285
|
-
|
|
286
|
-
## API Reference
|
|
287
|
-
|
|
288
|
-
### initTooltips()
|
|
289
|
-
|
|
290
|
-
Initializes the global tooltip delegation.
|
|
291
|
-
|
|
292
|
-
**Import:**
|
|
293
|
-
```ts
|
|
294
|
-
import { initTooltips } from 'spoko-design-system';
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
**Usage:**
|
|
298
|
-
```ts
|
|
299
|
-
initTooltips();
|
|
300
|
-
```
|
|
301
|
-
|
|
302
|
-
**Note:** Usually not needed if you import `'spoko-design-system/scripts/tooltips'` which auto-initializes.
|
|
303
|
-
|
|
304
|
-
### getEngineTooltipContent()
|
|
305
|
-
|
|
306
|
-
Generates HTML content for engine tooltips.
|
|
307
|
-
|
|
308
|
-
**Import:**
|
|
309
|
-
```ts
|
|
310
|
-
import { getEngineTooltipContent } from 'spoko-design-system';
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
**Usage:**
|
|
314
|
-
```ts
|
|
315
|
-
const tooltipHTML = getEngineTooltipContent(engine, translations);
|
|
316
|
-
```
|
|
317
|
-
|
|
318
|
-
**Parameters:**
|
|
319
|
-
|
|
320
|
-
| Parameter | Type | Required | Description |
|
|
321
|
-
|-----------|------|----------|-------------|
|
|
322
|
-
| `engine` | `Engine` | Yes | Engine object with nested structure |
|
|
323
|
-
| `translations` | `EngineTranslations` | No | Optional translation overrides |
|
|
324
|
-
|
|
325
|
-
**Returns:** HTML string for tooltip content
|
|
326
|
-
|
|
327
|
-
See [ProductEngine documentation](/components/product-engine) for `Engine` interface details.
|
|
328
|
-
|
|
329
|
-
## Dependencies
|
|
330
|
-
|
|
331
|
-
SDS includes `tippy.js` as a dependency. **Your project does not need to install it separately.**
|
|
332
|
-
|
|
333
|
-
If you have `tippy.js` in your project's `package.json`, you can safely remove it:
|
|
334
|
-
|
|
335
|
-
```bash
|
|
336
|
-
pnpm remove tippy.js
|
|
337
|
-
# or
|
|
338
|
-
npm uninstall tippy.js
|
|
339
|
-
```
|
|
340
|
-
|
|
341
|
-
## Troubleshooting
|
|
342
|
-
|
|
343
|
-
### Tooltips not showing
|
|
344
|
-
|
|
345
|
-
**Check these items:**
|
|
346
|
-
|
|
347
|
-
1. ✅ Script imported in layout: `<script src="/src/scripts/tooltips.ts"></script>`
|
|
348
|
-
2. ✅ Elements have `data-tippy-content` attribute
|
|
349
|
-
3. ✅ Content is not empty or "undefined"
|
|
350
|
-
4. ✅ Hard refresh browser (Ctrl+Shift+R) to clear cache
|
|
351
|
-
|
|
352
|
-
### Double tooltips or conflicts
|
|
353
|
-
|
|
354
|
-
If you see duplicate tooltips:
|
|
355
|
-
|
|
356
|
-
1. Only import the tooltip script **once** in your layout
|
|
357
|
-
2. Don't call `initTooltips()` manually if using auto-initialization
|
|
358
|
-
3. Remove any local `tippy.js` installations that might conflict
|
|
359
|
-
|
|
360
|
-
### Tooltips not working after navigation
|
|
361
|
-
|
|
362
|
-
If tooltips break after Astro View Transitions:
|
|
363
|
-
|
|
364
|
-
1. Verify `astro:page-load` event listener is registered (included in SDS script)
|
|
365
|
-
2. Check browser console for errors
|
|
366
|
-
3. Make sure View Transitions are properly configured in Astro
|
|
367
|
-
|
|
368
|
-
### Styling not applied
|
|
369
|
-
|
|
370
|
-
1. Verify SDS theme CSS is imported (included in SDS tooltip script)
|
|
371
|
-
2. Check CSS specificity - SDS uses `!important` for some properties
|
|
372
|
-
3. Ensure your build process handles CSS imports from `node_modules`
|
|
373
|
-
|
|
374
|
-
### Performance issues
|
|
375
|
-
|
|
376
|
-
If you have thousands of tooltips and notice lag:
|
|
377
|
-
|
|
378
|
-
1. The delegation pattern should handle this efficiently
|
|
379
|
-
2. Check if you're calling `initTooltips()` multiple times
|
|
380
|
-
3. Consider lazy-loading tooltip-heavy sections
|
|
381
|
-
|
|
382
|
-
## Browser Support
|
|
383
|
-
|
|
384
|
-
Tooltips work in all modern browsers:
|
|
385
|
-
|
|
386
|
-
- ✅ Chrome/Edge (latest)
|
|
387
|
-
- ✅ Firefox (latest)
|
|
388
|
-
- ✅ Safari (latest)
|
|
389
|
-
- ✅ Mobile browsers (iOS Safari, Chrome Android)
|
|
390
|
-
|
|
391
|
-
**Note:** Requires JavaScript. Content is still visible if JS is disabled (progressive enhancement).
|
|
392
|
-
|
|
393
|
-
## Examples
|
|
394
|
-
|
|
395
|
-
### Product Specification
|
|
396
|
-
|
|
397
|
-
```astro
|
|
398
|
-
<dl>
|
|
399
|
-
<dt>Weight</dt>
|
|
400
|
-
<dd>
|
|
401
|
-
<span data-tippy-content="Includes packaging">
|
|
402
|
-
2.5 kg
|
|
403
|
-
</span>
|
|
404
|
-
</dd>
|
|
405
|
-
</dl>
|
|
406
|
-
```
|
|
407
|
-
|
|
408
|
-
### Help Icons
|
|
409
|
-
|
|
410
|
-
```astro
|
|
411
|
-
<label>
|
|
412
|
-
Email
|
|
413
|
-
<span
|
|
414
|
-
class="inline-block ml-1 text-gray-400 cursor-help"
|
|
415
|
-
data-tippy-content="We'll never share your email">
|
|
416
|
-
ⓘ
|
|
417
|
-
</span>
|
|
418
|
-
</label>
|
|
419
|
-
```
|
|
420
|
-
|
|
421
|
-
### Technical Terms
|
|
422
|
-
|
|
423
|
-
```astro
|
|
424
|
-
<p>
|
|
425
|
-
The part fits all
|
|
426
|
-
<abbr
|
|
427
|
-
data-tippy-content="Volkswagen Aktiengesellschaft Group"
|
|
428
|
-
class="cursor-help underline decoration-dotted">
|
|
429
|
-
VAG
|
|
430
|
-
</abbr>
|
|
431
|
-
vehicles from 2009-2014.
|
|
432
|
-
</p>
|
|
433
|
-
```
|
|
434
|
-
|
|
435
|
-
## Best Practices
|
|
436
|
-
|
|
437
|
-
### ✅ Do
|
|
438
|
-
|
|
439
|
-
- Use semantic HTML with tooltips as enhancement
|
|
440
|
-
- Keep tooltip content concise (< 50 words)
|
|
441
|
-
- Use structured tooltips for multiple data points
|
|
442
|
-
- Include proper ARIA labels when needed
|
|
443
|
-
- Test on mobile devices
|
|
444
|
-
|
|
445
|
-
### ❌ Don't
|
|
446
|
-
|
|
447
|
-
- Put critical information only in tooltips
|
|
448
|
-
- Use tooltips for large blocks of text
|
|
449
|
-
- Nest interactive elements inside tooltips
|
|
450
|
-
- Use tooltips on disabled elements
|
|
451
|
-
- Initialize tooltips multiple times
|
|
452
|
-
|
|
453
|
-
## Migration
|
|
454
|
-
|
|
455
|
-
### From Direct Tippy.js
|
|
456
|
-
|
|
457
|
-
If migrating from a direct Tippy.js implementation:
|
|
458
|
-
|
|
459
|
-
1. **Remove** `tippy.js` from your `package.json`
|
|
460
|
-
2. **Remove** local tooltip initialization code
|
|
461
|
-
3. **Add** SDS tooltip script import
|
|
462
|
-
4. **Update** elements to use `data-tippy-content`
|
|
463
|
-
5. **Update** custom styles to target `.tippy-box[data-theme~='sds']`
|
|
464
|
-
|
|
465
|
-
### From Old SDS Setup
|
|
466
|
-
|
|
467
|
-
If you had the old setup with manual initialization:
|
|
468
|
-
|
|
469
|
-
**Old way (remove this):**
|
|
470
|
-
```astro
|
|
471
|
-
<script>
|
|
472
|
-
import { initTooltips } from 'spoko-design-system';
|
|
473
|
-
initTooltips();
|
|
474
|
-
</script>
|
|
475
|
-
```
|
|
476
|
-
|
|
477
|
-
**New way (use this):**
|
|
478
|
-
```astro
|
|
479
|
-
<script src="/src/scripts/tooltips.ts"></script>
|
|
480
|
-
```
|
|
481
|
-
|
|
482
|
-
```ts
|
|
483
|
-
// src/scripts/tooltips.ts
|
|
484
|
-
import 'spoko-design-system/scripts/tooltips';
|
|
485
|
-
```
|
|
486
|
-
|
|
487
|
-
## Related Documentation
|
|
488
|
-
|
|
489
|
-
- [ProductEngine Component](/components/product-engine) - Engine codes with tooltips
|
|
490
|
-
- [ProductCodes Component](/components/pr-code) - PR codes with tooltips
|
|
491
|
-
- [Tippy.js Documentation](https://atomiks.github.io/tippyjs/) - Underlying library
|
|
1
|
+
---
|
|
2
|
+
title: "Tooltips"
|
|
3
|
+
layout: "../../layouts/MainLayout.astro"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Tooltips
|
|
7
|
+
|
|
8
|
+
A complete tooltip system built on [Tippy.js](https://atomiks.github.io/tippyjs/) with custom SDS styling and automatic initialization.
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- 🎨 **Custom SDS Theme** - Matches design system colors
|
|
13
|
+
- ⚡ **Performance Optimized** - Delegation pattern handles thousands of tooltips efficiently
|
|
14
|
+
- 🔄 **Astro View Transitions** - Automatic re-initialization on navigation
|
|
15
|
+
- 🎯 **Simple API** - Just add a data attribute
|
|
16
|
+
- 📦 **Bundled** - No need to install tippy.js separately in your project
|
|
17
|
+
- 🔍 **SEO Friendly** - Content rendered in HTML, enhanced progressively
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
|
|
21
|
+
### Step 1: Create a tooltip initialization script
|
|
22
|
+
|
|
23
|
+
In your project, create a script file (e.g., `src/scripts/tooltips.ts`):
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
// src/scripts/tooltips.ts
|
|
27
|
+
import 'spoko-design-system/scripts/tooltips';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
That's it! This single import includes:
|
|
31
|
+
- ✅ Tippy.js library
|
|
32
|
+
- ✅ Base Tippy.js CSS
|
|
33
|
+
- ✅ SDS custom theme CSS
|
|
34
|
+
- ✅ Auto-initialization logic
|
|
35
|
+
- ✅ Astro View Transitions support
|
|
36
|
+
|
|
37
|
+
### Step 2: Import in your layout
|
|
38
|
+
|
|
39
|
+
Add the script to your main layout's `<head>`:
|
|
40
|
+
|
|
41
|
+
```astro
|
|
42
|
+
---
|
|
43
|
+
// src/layouts/BaseLayout.astro or HeadCommon.astro
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
<head>
|
|
47
|
+
<!-- ... other head elements -->
|
|
48
|
+
<script src="/src/scripts/tooltips.ts"></script>
|
|
49
|
+
</head>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Usage
|
|
53
|
+
|
|
54
|
+
### Basic Tooltip
|
|
55
|
+
|
|
56
|
+
Add the `data-tippy-content` attribute to any element:
|
|
57
|
+
|
|
58
|
+
<div class="component-preview">
|
|
59
|
+
<div class="bg-white p-6 w-full">
|
|
60
|
+
<button
|
|
61
|
+
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
|
62
|
+
data-tippy-content="This is a basic tooltip">
|
|
63
|
+
Hover over me
|
|
64
|
+
</button>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
```astro
|
|
69
|
+
<button data-tippy-content="This is a basic tooltip">
|
|
70
|
+
Hover over me
|
|
71
|
+
</button>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### HTML Content
|
|
75
|
+
|
|
76
|
+
Tooltips support HTML content:
|
|
77
|
+
|
|
78
|
+
<div class="component-preview">
|
|
79
|
+
<div class="bg-white p-6 w-full">
|
|
80
|
+
<span
|
|
81
|
+
class="underline decoration-dotted cursor-help"
|
|
82
|
+
data-tippy-content="<strong>Bold text</strong> and <em>italic text</em>">
|
|
83
|
+
HTML tooltip
|
|
84
|
+
</span>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
```astro
|
|
89
|
+
<span data-tippy-content="<strong>Bold text</strong> and <em>italic text</em>">
|
|
90
|
+
HTML tooltip
|
|
91
|
+
</span>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Structured Tooltips
|
|
95
|
+
|
|
96
|
+
For complex tooltips with headers and multiple sections:
|
|
97
|
+
|
|
98
|
+
<div class="component-preview">
|
|
99
|
+
<div class="bg-white p-6 w-full">
|
|
100
|
+
<span
|
|
101
|
+
class="underline decoration-dotted cursor-help text-blue-600"
|
|
102
|
+
data-tippy-content='<div class="tooltip-header"><strong>Product Details</strong></div><div class="tooltip-specs"><div class="tooltip-row"><span class="tooltip-label">SKU:</span><span class="tooltip-value">12345</span></div><div class="tooltip-row"><span class="tooltip-label">Weight:</span><span class="tooltip-value">2.5 kg</span></div></div>'>
|
|
103
|
+
Product Info
|
|
104
|
+
</span>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
```astro
|
|
109
|
+
<span data-tippy-content={`
|
|
110
|
+
<div class="tooltip-header">
|
|
111
|
+
<strong>Product Details</strong>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="tooltip-specs">
|
|
114
|
+
<div class="tooltip-row">
|
|
115
|
+
<span class="tooltip-label">SKU:</span>
|
|
116
|
+
<span class="tooltip-value">12345</span>
|
|
117
|
+
</div>
|
|
118
|
+
<div class="tooltip-row">
|
|
119
|
+
<span class="tooltip-label">Weight:</span>
|
|
120
|
+
<span class="tooltip-value">2.5 kg</span>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
`}>
|
|
124
|
+
Product Info
|
|
125
|
+
</span>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## Components with Built-in Tooltips
|
|
129
|
+
|
|
130
|
+
These SDS components automatically include tooltips:
|
|
131
|
+
|
|
132
|
+
### ProductEngine & ProductEngines
|
|
133
|
+
|
|
134
|
+
Engine codes with detailed specification tooltips:
|
|
135
|
+
|
|
136
|
+
```astro
|
|
137
|
+
import { ProductEngines } from 'spoko-design-system';
|
|
138
|
+
|
|
139
|
+
<ProductEngines engines={product.part_engines} />
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
See [ProductEngine documentation](/components/product-engine) for details.
|
|
143
|
+
|
|
144
|
+
### ProductCodes
|
|
145
|
+
|
|
146
|
+
PR codes with description tooltips (when available):
|
|
147
|
+
|
|
148
|
+
```astro
|
|
149
|
+
import { ProductCodes } from 'spoko-design-system';
|
|
150
|
+
|
|
151
|
+
<ProductCodes prcodes={product.pr_codes} isPdp={true} />
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Styling
|
|
155
|
+
|
|
156
|
+
### SDS Theme
|
|
157
|
+
|
|
158
|
+
The default SDS theme uses these design tokens:
|
|
159
|
+
|
|
160
|
+
| Property | Value | Token |
|
|
161
|
+
|----------|-------|-------|
|
|
162
|
+
| Background | `#f3f4f6` | `neutral-lightest` |
|
|
163
|
+
| Text Color | `#1e293b` | `slate-darkest` |
|
|
164
|
+
| Border | `#e5e7eb` | `neutral-lighter` |
|
|
165
|
+
| Header Background | `#001e50` | `accent-deepBlue` |
|
|
166
|
+
| Max Width | `280px` | - |
|
|
167
|
+
| Border Radius | `0.5rem` | - |
|
|
168
|
+
|
|
169
|
+
### Custom Styling
|
|
170
|
+
|
|
171
|
+
To customize the tooltip appearance, override these CSS classes:
|
|
172
|
+
|
|
173
|
+
```css
|
|
174
|
+
/* Main tooltip box */
|
|
175
|
+
.tippy-box[data-theme~='sds'] {
|
|
176
|
+
background-color: your-color !important;
|
|
177
|
+
color: your-text-color !important;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Tooltip content area */
|
|
181
|
+
.tippy-box[data-theme~='sds'] .tippy-content {
|
|
182
|
+
padding: 0.5rem 0.75rem;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* Structured tooltip header */
|
|
186
|
+
.tippy-box[data-theme~='sds'] .tooltip-header {
|
|
187
|
+
background-color: your-header-color;
|
|
188
|
+
color: white;
|
|
189
|
+
padding: 0.375rem 0.5rem;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* Tooltip specs rows */
|
|
193
|
+
.tippy-box[data-theme~='sds'] .tooltip-row {
|
|
194
|
+
display: flex;
|
|
195
|
+
justify-content: space-between;
|
|
196
|
+
padding: 0.25rem 0;
|
|
197
|
+
}
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
### Available CSS Classes
|
|
201
|
+
|
|
202
|
+
For structured tooltips:
|
|
203
|
+
|
|
204
|
+
| Class | Purpose |
|
|
205
|
+
|-------|---------|
|
|
206
|
+
| `.tooltip-header` | Dark blue header section |
|
|
207
|
+
| `.tooltip-specs` | Container for specification rows |
|
|
208
|
+
| `.tooltip-row` | Single specification row |
|
|
209
|
+
| `.tooltip-label` | Left-aligned label text |
|
|
210
|
+
| `.tooltip-value` | Right-aligned value text |
|
|
211
|
+
|
|
212
|
+
## Configuration
|
|
213
|
+
|
|
214
|
+
The tooltip system uses these default settings:
|
|
215
|
+
|
|
216
|
+
```ts
|
|
217
|
+
{
|
|
218
|
+
target: '[data-tippy-content]', // Target selector
|
|
219
|
+
allowHTML: true, // Allow HTML in content
|
|
220
|
+
theme: 'sds', // SDS custom theme
|
|
221
|
+
placement: 'top', // Default placement
|
|
222
|
+
arrow: true, // Show arrow
|
|
223
|
+
animation: 'shift-away', // Animation style
|
|
224
|
+
duration: [200, 150], // [show, hide] duration (ms)
|
|
225
|
+
maxWidth: 280, // Maximum width (px)
|
|
226
|
+
}
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
To customize, you can create your own initialization:
|
|
230
|
+
|
|
231
|
+
```ts
|
|
232
|
+
// src/scripts/custom-tooltips.ts
|
|
233
|
+
import { delegate } from 'tippy.js';
|
|
234
|
+
import 'tippy.js/dist/tippy.css';
|
|
235
|
+
import 'spoko-design-system/styles/tippy-theme.css';
|
|
236
|
+
|
|
237
|
+
export function initCustomTooltips() {
|
|
238
|
+
delegate('body', {
|
|
239
|
+
target: '[data-tippy-content]',
|
|
240
|
+
allowHTML: true,
|
|
241
|
+
theme: 'sds',
|
|
242
|
+
placement: 'bottom', // Changed from 'top'
|
|
243
|
+
maxWidth: 400, // Wider tooltips
|
|
244
|
+
// ... other options
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// Initialize
|
|
249
|
+
if (typeof document !== 'undefined') {
|
|
250
|
+
document.addEventListener('astro:page-load', () => {
|
|
251
|
+
initCustomTooltips();
|
|
252
|
+
});
|
|
253
|
+
}
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
## Technical Details
|
|
257
|
+
|
|
258
|
+
### Delegation Pattern
|
|
259
|
+
|
|
260
|
+
The tooltip system uses Tippy.js's delegation pattern:
|
|
261
|
+
|
|
262
|
+
- **Single event listener** on `body` handles all tooltips
|
|
263
|
+
- **No re-initialization needed** when DOM changes
|
|
264
|
+
- **Efficient memory usage** - scales to thousands of tooltips
|
|
265
|
+
- **Dynamic content support** - works with client-side rendering
|
|
266
|
+
|
|
267
|
+
### How It Works
|
|
268
|
+
|
|
269
|
+
1. One global event listener watches for mouseenter/focus on `[data-tippy-content]` elements
|
|
270
|
+
2. Tooltip instance created on-demand when user hovers
|
|
271
|
+
3. Instance destroyed when tooltip hides
|
|
272
|
+
4. No memory leaks from orphaned instances
|
|
273
|
+
|
|
274
|
+
### Astro View Transitions
|
|
275
|
+
|
|
276
|
+
The system automatically handles Astro's View Transitions:
|
|
277
|
+
|
|
278
|
+
```ts
|
|
279
|
+
document.addEventListener('astro:page-load', () => {
|
|
280
|
+
initTooltips();
|
|
281
|
+
});
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
This ensures tooltips work correctly after client-side navigation.
|
|
285
|
+
|
|
286
|
+
## API Reference
|
|
287
|
+
|
|
288
|
+
### initTooltips()
|
|
289
|
+
|
|
290
|
+
Initializes the global tooltip delegation.
|
|
291
|
+
|
|
292
|
+
**Import:**
|
|
293
|
+
```ts
|
|
294
|
+
import { initTooltips } from 'spoko-design-system';
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
**Usage:**
|
|
298
|
+
```ts
|
|
299
|
+
initTooltips();
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
**Note:** Usually not needed if you import `'spoko-design-system/scripts/tooltips'` which auto-initializes.
|
|
303
|
+
|
|
304
|
+
### getEngineTooltipContent()
|
|
305
|
+
|
|
306
|
+
Generates HTML content for engine tooltips.
|
|
307
|
+
|
|
308
|
+
**Import:**
|
|
309
|
+
```ts
|
|
310
|
+
import { getEngineTooltipContent } from 'spoko-design-system';
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
**Usage:**
|
|
314
|
+
```ts
|
|
315
|
+
const tooltipHTML = getEngineTooltipContent(engine, translations);
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
**Parameters:**
|
|
319
|
+
|
|
320
|
+
| Parameter | Type | Required | Description |
|
|
321
|
+
|-----------|------|----------|-------------|
|
|
322
|
+
| `engine` | `Engine` | Yes | Engine object with nested structure |
|
|
323
|
+
| `translations` | `EngineTranslations` | No | Optional translation overrides |
|
|
324
|
+
|
|
325
|
+
**Returns:** HTML string for tooltip content
|
|
326
|
+
|
|
327
|
+
See [ProductEngine documentation](/components/product-engine) for `Engine` interface details.
|
|
328
|
+
|
|
329
|
+
## Dependencies
|
|
330
|
+
|
|
331
|
+
SDS includes `tippy.js` as a dependency. **Your project does not need to install it separately.**
|
|
332
|
+
|
|
333
|
+
If you have `tippy.js` in your project's `package.json`, you can safely remove it:
|
|
334
|
+
|
|
335
|
+
```bash
|
|
336
|
+
pnpm remove tippy.js
|
|
337
|
+
# or
|
|
338
|
+
npm uninstall tippy.js
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
## Troubleshooting
|
|
342
|
+
|
|
343
|
+
### Tooltips not showing
|
|
344
|
+
|
|
345
|
+
**Check these items:**
|
|
346
|
+
|
|
347
|
+
1. ✅ Script imported in layout: `<script src="/src/scripts/tooltips.ts"></script>`
|
|
348
|
+
2. ✅ Elements have `data-tippy-content` attribute
|
|
349
|
+
3. ✅ Content is not empty or "undefined"
|
|
350
|
+
4. ✅ Hard refresh browser (Ctrl+Shift+R) to clear cache
|
|
351
|
+
|
|
352
|
+
### Double tooltips or conflicts
|
|
353
|
+
|
|
354
|
+
If you see duplicate tooltips:
|
|
355
|
+
|
|
356
|
+
1. Only import the tooltip script **once** in your layout
|
|
357
|
+
2. Don't call `initTooltips()` manually if using auto-initialization
|
|
358
|
+
3. Remove any local `tippy.js` installations that might conflict
|
|
359
|
+
|
|
360
|
+
### Tooltips not working after navigation
|
|
361
|
+
|
|
362
|
+
If tooltips break after Astro View Transitions:
|
|
363
|
+
|
|
364
|
+
1. Verify `astro:page-load` event listener is registered (included in SDS script)
|
|
365
|
+
2. Check browser console for errors
|
|
366
|
+
3. Make sure View Transitions are properly configured in Astro
|
|
367
|
+
|
|
368
|
+
### Styling not applied
|
|
369
|
+
|
|
370
|
+
1. Verify SDS theme CSS is imported (included in SDS tooltip script)
|
|
371
|
+
2. Check CSS specificity - SDS uses `!important` for some properties
|
|
372
|
+
3. Ensure your build process handles CSS imports from `node_modules`
|
|
373
|
+
|
|
374
|
+
### Performance issues
|
|
375
|
+
|
|
376
|
+
If you have thousands of tooltips and notice lag:
|
|
377
|
+
|
|
378
|
+
1. The delegation pattern should handle this efficiently
|
|
379
|
+
2. Check if you're calling `initTooltips()` multiple times
|
|
380
|
+
3. Consider lazy-loading tooltip-heavy sections
|
|
381
|
+
|
|
382
|
+
## Browser Support
|
|
383
|
+
|
|
384
|
+
Tooltips work in all modern browsers:
|
|
385
|
+
|
|
386
|
+
- ✅ Chrome/Edge (latest)
|
|
387
|
+
- ✅ Firefox (latest)
|
|
388
|
+
- ✅ Safari (latest)
|
|
389
|
+
- ✅ Mobile browsers (iOS Safari, Chrome Android)
|
|
390
|
+
|
|
391
|
+
**Note:** Requires JavaScript. Content is still visible if JS is disabled (progressive enhancement).
|
|
392
|
+
|
|
393
|
+
## Examples
|
|
394
|
+
|
|
395
|
+
### Product Specification
|
|
396
|
+
|
|
397
|
+
```astro
|
|
398
|
+
<dl>
|
|
399
|
+
<dt>Weight</dt>
|
|
400
|
+
<dd>
|
|
401
|
+
<span data-tippy-content="Includes packaging">
|
|
402
|
+
2.5 kg
|
|
403
|
+
</span>
|
|
404
|
+
</dd>
|
|
405
|
+
</dl>
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
### Help Icons
|
|
409
|
+
|
|
410
|
+
```astro
|
|
411
|
+
<label>
|
|
412
|
+
Email
|
|
413
|
+
<span
|
|
414
|
+
class="inline-block ml-1 text-gray-400 cursor-help"
|
|
415
|
+
data-tippy-content="We'll never share your email">
|
|
416
|
+
ⓘ
|
|
417
|
+
</span>
|
|
418
|
+
</label>
|
|
419
|
+
```
|
|
420
|
+
|
|
421
|
+
### Technical Terms
|
|
422
|
+
|
|
423
|
+
```astro
|
|
424
|
+
<p>
|
|
425
|
+
The part fits all
|
|
426
|
+
<abbr
|
|
427
|
+
data-tippy-content="Volkswagen Aktiengesellschaft Group"
|
|
428
|
+
class="cursor-help underline decoration-dotted">
|
|
429
|
+
VAG
|
|
430
|
+
</abbr>
|
|
431
|
+
vehicles from 2009-2014.
|
|
432
|
+
</p>
|
|
433
|
+
```
|
|
434
|
+
|
|
435
|
+
## Best Practices
|
|
436
|
+
|
|
437
|
+
### ✅ Do
|
|
438
|
+
|
|
439
|
+
- Use semantic HTML with tooltips as enhancement
|
|
440
|
+
- Keep tooltip content concise (< 50 words)
|
|
441
|
+
- Use structured tooltips for multiple data points
|
|
442
|
+
- Include proper ARIA labels when needed
|
|
443
|
+
- Test on mobile devices
|
|
444
|
+
|
|
445
|
+
### ❌ Don't
|
|
446
|
+
|
|
447
|
+
- Put critical information only in tooltips
|
|
448
|
+
- Use tooltips for large blocks of text
|
|
449
|
+
- Nest interactive elements inside tooltips
|
|
450
|
+
- Use tooltips on disabled elements
|
|
451
|
+
- Initialize tooltips multiple times
|
|
452
|
+
|
|
453
|
+
## Migration
|
|
454
|
+
|
|
455
|
+
### From Direct Tippy.js
|
|
456
|
+
|
|
457
|
+
If migrating from a direct Tippy.js implementation:
|
|
458
|
+
|
|
459
|
+
1. **Remove** `tippy.js` from your `package.json`
|
|
460
|
+
2. **Remove** local tooltip initialization code
|
|
461
|
+
3. **Add** SDS tooltip script import
|
|
462
|
+
4. **Update** elements to use `data-tippy-content`
|
|
463
|
+
5. **Update** custom styles to target `.tippy-box[data-theme~='sds']`
|
|
464
|
+
|
|
465
|
+
### From Old SDS Setup
|
|
466
|
+
|
|
467
|
+
If you had the old setup with manual initialization:
|
|
468
|
+
|
|
469
|
+
**Old way (remove this):**
|
|
470
|
+
```astro
|
|
471
|
+
<script>
|
|
472
|
+
import { initTooltips } from 'spoko-design-system';
|
|
473
|
+
initTooltips();
|
|
474
|
+
</script>
|
|
475
|
+
```
|
|
476
|
+
|
|
477
|
+
**New way (use this):**
|
|
478
|
+
```astro
|
|
479
|
+
<script src="/src/scripts/tooltips.ts"></script>
|
|
480
|
+
```
|
|
481
|
+
|
|
482
|
+
```ts
|
|
483
|
+
// src/scripts/tooltips.ts
|
|
484
|
+
import 'spoko-design-system/scripts/tooltips';
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
## Related Documentation
|
|
488
|
+
|
|
489
|
+
- [ProductEngine Component](/components/product-engine) - Engine codes with tooltips
|
|
490
|
+
- [ProductCodes Component](/components/pr-code) - PR codes with tooltips
|
|
491
|
+
- [Tippy.js Documentation](https://atomiks.github.io/tippyjs/) - Underlying library
|