CV Man Logo Home Dashboard Guida Tooltip Guida Tecnica Guida Utente
Dark Mode
CV Man / Documentazione / Guida ai Tooltip

Guida all'Implementazione dei Tooltip

🇮🇹 It 🔔 👤 Admin

Introduzione

Questa guida spiega come implementare e utilizzare il sistema di tooltip e spiegazioni contestuali in tutte le pagine del progetto CV Man. Il sistema è progettato per migliorare l'esperienza utente fornendo informazioni aggiuntive sugli elementi dell'interfaccia.

Inclusione dei File Necessari

Per implementare i tooltip in una pagina, è necessario includere i seguenti file:

<link rel="stylesheet" href="../shared/css/tooltips.css">
<link rel="stylesheet" href="../shared/css/enhanced-tooltips.css">
<script src="../shared/js/tooltips.js"></script>
<script src="../shared/js/enhanced-tooltips.js"></script>

In alternativa, è possibile utilizzare lo script di iniezione automatica che aggiunge questi file se non sono già presenti:

<script src="../shared/js/tooltip-injector.js"></script>

Tooltip Base

Per aggiungere un tooltip a un elemento, utilizzare gli attributi data-tooltip e data-tooltip-position:

<button data-tooltip="Questo è un tooltip" data-tooltip-position="top">Pulsante con Tooltip</button>
Esempio:

Posizioni dei Tooltip

I tooltip possono essere posizionati in quattro direzioni diverse utilizzando l'attributo data-tooltip-position:

Esempi di posizionamento:

Pannelli di Spiegazione

Per aggiungere un pannello di spiegazione espandibile, utilizzare la seguente struttura:

<button class="explanation-toggle" data-target="example-panel"> <span class="icon">ℹ️</span> Mostra spiegazione </button> <div class="explanation-panel" id="example-panel"> <h3>Titolo della Spiegazione</h3> <p>Contenuto della spiegazione...</p> </div>
Esempio:

Esempio di Pannello di Spiegazione

Questo è un esempio di pannello di spiegazione espandibile. Può contenere testo formattato, elenchi e altri elementi HTML.

  • Punto 1: Informazione importante
  • Punto 2: Altra informazione importante

Aiuto Contestuale Globale

Il sistema include anche un pulsante di aiuto contestuale globale che viene aggiunto automaticamente a tutte le pagine. Questo pulsante mostra informazioni specifiche per la pagina corrente.

Il contenuto dell'aiuto contestuale è definito nel file enhanced-tooltips.js e può essere personalizzato per ogni pagina.

Tooltip per Elementi di Form

Per aggiungere un'icona di aiuto accanto a un'etichetta di form, utilizzare la seguente struttura:

<div class="form-group"> <label> Nome Campo <span class="form-help-icon" data-tooltip="Spiegazione del campo">?</span> </label> <input type="text"> </div>
Esempio:

Tooltip Automatici

Il sistema aggiunge automaticamente tooltip a elementi comuni dell'interfaccia come pulsanti, campi di input e icone. Questi tooltip sono definiti nel file enhanced-tooltips.js.

È possibile personalizzare i tooltip automatici modificando l'oggetto commonElementsTooltips nel file enhanced-tooltips.js.

Best Practices

  • Utilizzare tooltip brevi e concisi (massimo 2-3 frasi)
  • Posizionare i tooltip in modo che non coprano altri elementi importanti
  • Utilizzare i pannelli di spiegazione per informazioni più dettagliate
  • Mantenere uno stile coerente in tutti i tooltip
  • Evitare di utilizzare tooltip per informazioni essenziali