Riassunto AI
Vuoi aggiungere tooltip al tuo modulo? I tooltip sono piccole caselle che compaiono quando passi il mouse sopra un'area del tuo sito WordPress e sono ottimi per aggiungere informazioni aggiuntive su un campo senza creare confusione.
In questo post, ti mostreremo come aggiungere tooltip in WordPress.
In Questo Articolo
- Cos'è un tooltip in WordPress?
- Installare un tooltip di WordPress senza plugin
- Passaggio 1. Crea un modulo WordPress
- Passaggio 2. Installa il plugin Shortcodes Ultimate
- Passaggio 3: Ottieni il tuo shortcode per tooltip
- Passaggio 4: Aggiungi il tuo tooltip al tuo modulo
- Passaggio 5: Personalizza il tuo tooltip
- Passaggio 5: Trasforma il tuo tooltip in un'icona (facoltativo)
- Considerazioni finali
Crea subito il tuo modulo WordPress
Cos'è un tooltip in WordPress?
I tooltip sono suggerimenti, termini di glossario o messaggi che compaiono quando il visitatore passa il mouse o tocca (sui dispositivi mobili) un elemento del tuo sito WordPress. E nei tuoi moduli WordPress, i tooltip possono essere utilizzati per aggiungere informazioni aggiuntive su un particolare campo.
Ad esempio, guarda lo screenshot qui sotto.
WPForms ti consente di aggiungere facilmente una descrizione per ogni campo nell'editor dei moduli. A differenza di una tipica descrizione di campo, i tooltip sono nascosti per impostazione predefinita. Appaiono solo quando il tuo utente desidera maggiori dettagli su un determinato campo passando il mouse sopra la descrizione del campo.
Aggiungere un tooltip è un'ottima idea se desideri fornire maggiori dettagli su un determinato campo senza creare distrazioni non necessarie sul tuo modulo.
Ora che sai cos'è un tooltip, continua a leggere per scoprire come aggiungerli al tuo sito.
Installare un tooltip di WordPress senza plugin
Sì, è possibile installare un tooltip di WordPress senza un plugin. Tuttavia, se non vuoi utilizzare un plugin per tooltip per aggiungere facilmente un tooltip al tuo sito WordPress, dovrai essere un utente avanzato e utilizzare html o jquery (o assumere uno sviluppatore per farlo per te).
Fortunatamente, puoi risparmiare tempo e denaro utilizzando un plugin per tooltip. Per gli utenti WPForms, consigliamo il plugin gratuito Shortcodes Ultimate.
Shortcodes Ultimate è facile da usare e funziona benissimo con i temi WordPress più popolari e migliori.
Questo plugin WordPress estremamente utile e gratuito ti fornirà oltre 50 shortcode da utilizzare per aggiungere facilmente varie funzioni al tuo sito, incluso lo shortcode per tooltip. Successivamente, ti mostreremo esattamente come aggiungere questo plugin per tooltip di WordPress.
Come aggiungere tooltip in WordPress
Diamo un'occhiata alla guida passo passo su come aggiungere tooltip in WordPress.
Passaggio 1. Crea un modulo WordPress
La prima cosa che devi fare è installare e attivare WPForms sul tuo sito. Se hai bisogno di aiuto, consulta questa guida su come installare un plugin di WordPress.
Quindi, dovrai creare un modulo semplice in WordPress.
Ottimo lavoro nel creare il tuo modulo. Torneremo su di esso in un passaggio successivo.
Passaggio 2. Installa il plugin Shortcodes Ultimate
Successivamente, fai clic qui per andare su WordPress e scaricare il plugin gratuito Shortcodes Ultimate.
Oppure, se sei già nella tua bacheca di WordPress, fai clic su Plugin » Aggiungi nuovo, cerca Shortcodes Ultimate e fai clic su Installa ora.
Una volta attivato il plugin, sei pronto per iniziare a usarlo.
Passaggio 3: Ottieni il tuo shortcode per tooltip
Ora, trova il plugin Shortcodes Ultimate sul lato sinistro della tua bacheca di WordPress e fai clic su Shortcode disponibili. Scorri quella pagina e seleziona il pulsante Tooltip.
Nella pagina successiva, evidenzia e copia lo shortcode:
Passaggio 4: Aggiungi il tuo tooltip al tuo modulo
Ora che hai il tuo shortcode tooltip, è il momento di aggiungerlo al tuo modulo di contatto semplice.
Torna al tuo modulo cliccando su WPForms » Tutti i moduli e poi seleziona Modifica sotto il modulo a cui desideri aggiungere il tuo tooltip.
Una volta sul modulo, clicca sul campo a cui desideri aggiungere il tuo tooltip e incolla il tuo shortcode tooltip nella casella di descrizione.
Una volta salvato il modulo e visualizzato dal frontend, verrà ora visualizzato il tooltip:
Passaggio 5: Personalizza il tuo tooltip
Puoi anche modificare il codice per visualizzare il tuo testo. Ecco un esempio con le modifiche apportate in grassetto:
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip]
Puoi anche cambiare un sacco di opzioni diverse nelle impostazioni del tuo tooltip che puoi trovare scorrendo fino in fondo alla pagina Shortcodes » Shortcode disponibili come:
- Stile + Colori
- Posizione
- Dimensione
- Comportamento
- E altro ancora
Il passo successivo è facoltativo ma renderà il tuo tooltip ancora più personalizzato e manterrà i tuoi moduli ancora più puliti e privi di distrazioni.
Passaggio 5: Trasforma il tuo tooltip in un'icona (facoltativo)
A meno che tu non specifichi e inviti esplicitamente le persone a passare il mouse sopra il tuo tooltip nel tuo shortcode tooltip, i tuoi visitatori potrebbero non rendersi conto che ci sono contenuti aggiuntivi in attesa di essere mostrati in quel tooltip! Un ottimo modo per assicurarsi che i tuoi lettori passino il mouse sopra il tooltip è renderlo un'icona invece di usare solo testo.
Ad esempio, molte persone aggiungono un'icona informativa "i" e poi, quando l'utente passa il mouse sopra quell'icona, il tooltip viene visualizzato. Quanto è elegante?
Per fare ciò, prima, scarica e attiva il plugin gratuito Better Font Awesome. Se sei saltato direttamente a questa parte del post, ecco un link a come installare un plugin di WordPress se ne hai bisogno.
Una volta attivato il plugin, avrai accesso a migliaia di icone gratuite che puoi utilizzare ovunque sul tuo sito WordPress con un semplice shortcode. Ora, procediamo e aggiungiamo lo shortcode dell'icona Info al nostro tooltip.
Stiamo per inserire lo shortcode di un plugin all'interno dello shortcode di un altro plugin. Ma non preoccuparti, funzioneranno entrambi!
Torna alla casella di descrizione del campo del tuo modulo che contiene il tuo tooltip e sostituisci semplicemente il testo visualizzato all'interno del tuo shortcode tooltip con questo shortcode:
[icon name="info"]
L'area di testo che dovresti sostituire con lo shortcode sopra è evidenziata di seguito:
Ed ecco come dovrebbe apparire il codice una volta aggiunto lo shortcode dell'icona:
In alternativa, puoi semplicemente copiare e incollare lo shortcode qui sotto nella tua casella di descrizione e modificarlo a tuo piacimento.
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip]
Successivamente, salva il tuo modulo e controllalo sul frontend per vedere l'icona del tuo tooltip.
Ottimo lavoro! Ora, se desideri diventare ancora più avanzato e posizionare l'icona del tooltip sopra il campo accanto all'etichetta, consulta il nostro tutorial approfondito su come aggiungere icone ai moduli di WordPress.
Considerazioni finali
Questo è tutto! Ora sai come aggiungere tooltip in WordPress.
Se vuoi cambiare l'aspetto dei pulsanti dei tuoi moduli, leggi come personalizzare gli stili dei pulsanti con CSS. Oppure, se preferisci, consulta la nostra guida su come stilizzare WPForms con CSS Hero (nessuna codifica richiesta).
Cosa stai aspettando? Inizia oggi stesso con il miglior plugin per moduli WordPress.
Se ti è piaciuto questo articolo, seguici su Facebook e Twitter per altri tutorial gratuiti su WordPress.
È possibile aggiungere più tooltip con messaggi diversi?
Grazie
Ciao!
Certo, puoi creare tooltip diversi per campi diversi, tuttavia, un campo può avere solo un tooltip poiché una volta che ci passi sopra il mouse, solo un tooltip può essere visualizzato per esso.
Spero sia chiaro.
Buona giornata 🙂
Come si può aggiungere un tooltip a un'icona o un'immagine su WordPress?
Ciao Joshu!
Puoi semplicemente racchiudere un tag HTML di immagine o icona con lo shortcode Tooltip secondo le istruzioni fornite in questo tutorial.
Spero questo aiuti.
Buona giornata 🙂
Ciao, grazie per il consiglio.
Penso che il modulo sarebbe più ordinato se l'icona del tooltip fosse posizionata accanto all'etichetta del campo invece che in fondo a ciascun campo, proprio come hai nella sezione delle impostazioni del modulo con il tooltip dell'icona a punto interrogativo. Se l'hai fatto in quel modo, immagino che anche tu concordi che sia meglio. Come otteniamo un effetto simile?
Ciao Chris!
Puoi provare a inserire lo shortcode Tooltip nel campo Etichetta. Non l'ho testato personalmente, ma puoi provare.
Spero questo aiuti!
Buona giornata 🙂
Funziona, ma poi tutto il codice e la descrizione del tooltip vengono inviati via email e possono essere difficili da leggere
Ciao Gareth.
In questo caso, puoi provare a utilizzare gli Smart Tag dei campi nelle impostazioni di notifica invece di quello {all_fields}.
E nel caso ti sia d'aiuto, abbiamo un ottimo tutorial su come utilizzare gli Smart Tag nell'email di notifica.
Quando utilizzi gli Smart Tag, non aggiungerà automaticamente l'etichetta del campo, ma solo il suo valore, quindi dovrai aggiungere le etichette manualmente.
Spero questo aiuti.
Buona giornata 🙂
Ciao, vorrei aggiungere un'icona tooltip dopo l'etichetta ma quando inserisco lo shortcode [tooltip] in questa sezione, lo riconosce solo come testo normale. c'è una soluzione?
Ehi Sina – Attualmente il campo etichetta non supporta gli shortcode, solo il campo descrizione supporta gli shortcode. Se ti serve nel campo etichetta, il nostro team di supporto potrebbe aiutarti con del codice personalizzato. Se sei un utente con licenza a pagamento, puoi creare un ticket di supporto qui.
Buona giornata 🙂
Salve…
Potrei usarlo per i titoli delle colonne in WooCommerce?
Grazie.
Ciao Octavio – Mi scuso, ma non supportiamo alcuna integrazione con WooCommerce, principalmente perché sono fortemente integrati con i propri sistemi di moduli.
Se hai bisogno che i moduli funzionino all'interno di WooCommerce, ti suggerisco di contattare direttamente il team di Woo per assicurarti di trovare un'opzione che si integri correttamente con il loro sistema.
Grazie :)
Ciao,
Sto cercando di aggiungere i tooltip al mio sito ma non funziona. Shortcodes Ultimate non ha shortcode disponibili a meno che non cerchi nella loro documentazione. Potrebbe essere questa la causa?
Ciao, è possibile cambiare il colore e la dimensione del tooltip dell'icona? Quale codice mi servirebbe per questo?
Ciao Emma,
Ottima domanda! Fai riferimento a questa guida di Shortcode Ultimate per formattare il testo.
Spero che questo aiuti! :)
Come posso far apparire un tooltip se l'utente non ha compilato un campo? So che esiste già quel messaggio, ma è piuttosto piccolo e molte persone si confondono quando compilano il modulo. Idealmente vorrei che lampeggiasse in qualche modo
Ciao Myur – Sebbene attualmente non abbiamo l'opzione per mostrare il messaggio nel tooltip, se preferisci, puoi aumentare la dimensione del carattere del messaggio di validazione utilizzando il seguente CSS:
div.wpforms-container-full .wpforms-form em.wpforms-error { font-size: 16px !important; /* Si prega di modificare i valori secondo le proprie preferenze */ }Nel caso possa essere utile, puoi consultare la nostra documentazione qui per aggiungere CSS personalizzato.
Puoi anche mostrare un messaggio obbligatorio nel placeholder del campo come mostrato in questo screenshot.