L'immagine mostra il tooltip del tutorial posizionato sul lato destro dello schermo ma tagliato: il testo "CREA IL TU..." e "DI 7" sono visibili ma il tooltip esce dal viewport a destra. Il problema è nel calcolo della posizione del tooltip che non considera i bordi del viewport.

Il problema è chiaro: il tooltip usa style.left = rect.left + rect.width + TOOLTIP_OFFSET per la posizione "right" senza verificare se esce dal viewport. Quando l'elemento target è nella colonna destra (come il campo Cognome), il tooltip viene posizionato oltre il bordo destro dello schermo. Serve un sistema di posizionamento multi-pass con clamping finale.

Ora rimuovo il vecchio fallback style.bottom / style.right che usava proprietà non uniformi nel blocco di default quando targetRect è null, e unifico il formato:

La correzione e completa. Il nuovo computeTooltipPosition usa un algoritmo multi-pass: calcola lo spazio effettivo disponibile nelle 4 direzioni, sceglie la posizione che ci sta davvero (rispettando la preferenza del DB ma con fallback automatico se manca spazio), e poi applica un clamping finale su entrambi gli assi — left sempre tra [SCREEN_MARGIN, vpWidth - TOOLTIP_WIDTH - SCREEN_MARGIN] e top sempre tra [SCREEN_MARGIN, vpHeight - TOOLTIP_HEIGHT - SCREEN_MARGIN]. Il tooltip non puo piu uscire dallo schermo in nessuna direzione, indipendentemente da dove si trova l'elemento evidenziato.

Now read the contact form, HR form and corsi form to understand current field structure:

I have enough context. Let me now implement everything systematically.

Step 1: Create tutorial-demo-data.ts

Step 2: Create tutorial-demo-context.tsx — the context that exposes isTutorialDemoMode to all forms:

Now rewrite the TutorialProvider with isTutorialDemoMode, the demo banner, TutorialDemoContext, and the save-guard dialog:

Now update the use-tutorial hook to expose the new fields:

The hook is fine — it already re-exports everything from context. Now the app-shell.tsx needs padding-top when the demo banner is shown. The simplest approach is adding a CSS variable via the banner itself. Also, the main element needs pt-9 when demo mode is active. Let me handle this with a wrapper component:

Now read the tops of the three forms to find where useState initial values are set:

Now I have all I need. Let me precompile the three forms with demo data using useEffect + useTutorialDemoMode:

contact-form-page.tsx — inject demo data:

Now find where the existing useEffect for loading contact data is, and add a new useEffect for demo precompilation after the main one:

Now add a small "dato demo" badge next to the demo-filled fields. The cleanest approach is a badge near the section title:

hr-candidato-form-page.tsx — inject demo data:

Now add a demo badge to the HR form card title:

gestione-corsi-page.tsx — inject demo data for corsi:

Now inject demo data in openNewCorsoDialog when demo mode is on:

Now read the exact lines for all the missing selectors in the priority components:

Now I have all the context. Let me add all the missing data-tour attributes to the priority components. I'll do them in parallel:

contact-details-page.tsx — add data-tour to section nav cards:

contact-form-page.tsx — add data-tour="contact-structure" to the struttura MultiSelect wrapper:

Now check for family/medical add buttons, contact-search, relation-select etc. in contact-details:

The medical card is in a separate component (CertificatiMediciCard). Similarly, family/nuclear family is likely in a separate component. Let's look for that now:

Family is handled by AffiliazioniContattoCard, medical by CertificatiMediciCard. Let me add data-tour to both components:

Now add all data-tour to affiliazioni-contatto-card and certificati-medici-card in parallel:

Now add data-tour to certificati-medici-card.tsx:

Now add data-tour to the medical status badge. Find it:

Now add data-tour to passaggi-consegna-page.tsx — the dialog fields:

Now add data-tour to faq-page.tsx — find and add all the missing FAQ selectors: