{"id":255352,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/creazione-di-una-descrizione-comando-utilizzando-i-css\/"},"modified":"2022-12-23T11:51:00","modified_gmt":"2022-12-23T08:51:00","slug":"creazione-di-una-descrizione-comando-utilizzando-i-css","status":"publish","type":"post","link":"https:\/\/inform.click\/it\/creazione-di-una-descrizione-comando-utilizzando-i-css\/","title":{"rendered":"Creazione di una descrizione comando utilizzando i CSS"},"content":{"rendered":"

\n Probabilmente sai gi\u00e0 cos'\u00e8 un tooltip.\n<\/p>\n

\n Un tooltip \u00e8 un'icona o un testo che, quando ci si passa sopra, ci fornisce maggiori informazioni in una bolla o pop-up.\n<\/p>\n

\n Normalmente trovi i suggerimenti nei moduli, ma puoi posizionarli ovunque gli utenti richiedano maggiori informazioni.\n<\/p>\n

\n Nell'immagine sopra, il cerchio con il punto interrogativo all'interno mostra un tooltip<\/strong>. Quando ci si passa sopra, questo tooltip fornisce maggiori informazioni sui tipi di caratteri che la tua password deve includere.\n<\/p>\n

\n Puoi ottenere framework per implementare i suggerimenti nel tuo sito Web, ma la maggior parte delle volte questi framework utilizzano JavaScript per ottenere questo risultato.\n<\/p>\n

\n In questo articolo impareremo come creare tooltip usando solo CSS<\/strong> in un modo relativamente semplice.\n<\/p>\n

\n Prima di iniziare, il file HTML e CSS finale per l'implementazione del tooltip \u00e8 disponibile alla fine di questo blog<\/strong>. Abbiamo descritto in dettaglio ogni singolo elemento utilizzato in HTML e CSS per implementare il tooltip nel modo pi\u00f9 semplice possibile.\n<\/p>\n

\n Sarai in grado di implementare la funzione tooltip su qualsiasi sito Web utilizzando solo HTML e CSS, dopo aver letto completamente questo articolo.\n<\/p>\n

\n Quindi cominciamo…\n<\/p>\n

\n Inizieremo creando una semplice pagina HTML che richiede la password.\n<\/p>\n

\n Passaggio 1: creazione di una semplice pagina HTML per visualizzare la descrizione comando
\n<\/h5>\n

\n Ecco il codice HTML di base per la pagina del modulo<\/strong> ,\n<\/p>\n

\n\n\n<\/code><\/pre>\n
<\/p>\n
\n<\/pre>\n
<br \/>\n  Awesome CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<p>\n  <code>Come puoi vedere, abbiamo collegato il nostro file \" <strong>style.css<\/strong> \" nell'html sopra.<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Creeremo il tooltip usando questo file CSS.<\/code>\n<\/p>\n<p>\n  <code>Usiamo un <strong>semplice modulo<\/strong> per provare la funzione tool-tip. Questo modulo ha solo un campo etichettato come \" <strong>Password<\/strong> \" poich\u00e9 lo stiamo usando solo per illustrare come funzionano i suggerimenti.<\/code>\n<\/p>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> <\/pre>\n<p>\n  <code>Abbiamo usato la classe \" <strong>tooltip<\/strong> \" per implementare la funzione tooltip usando i CSS. Di questo parleremo nella prossima sezione.<\/code>\n<\/p>\n<h5>\n  <code>Passaggio 2: stili CSS di base per la nostra pagina HTML<\/code><br \/>\n<\/h5>\n<p>\n  <code>Prima di creare il CSS per \"tooltip\", dobbiamo creare alcuni <strong>stili CSS di base per la nostra pagina html<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  Questo dar\u00e0 una pagina html con un bel sfondo verde. Abbiamo anche selezionato il carattere verdana e il colore del carattere come bianco.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Abbiamo posizionato il form “relativamente”, con una larghezza massima di 600 pixel e un margine del 20%.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  La classe dell'etichetta del modulo serve a specificare la dimensione del carattere e la spaziatura delle lettere per il testo dell'etichetta che useremo.\n<\/p>\n<pre><code>forminput{\nmargin: 0 10px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #444;\n}<\/code><\/pre>\n<p>\n  Qui abbiamo gli stili per il campo modulo. Non c'\u00e8 niente di complicato in questo stile. Abbiamo fornito un <strong>margine<\/strong> e <strong>una spaziatura interna<\/strong> appropriati oltre a <strong>specificare la dimensione<\/strong> e <strong>il colore<\/strong> del carattere per i campi del modulo.\n<\/p>\n<p>\n  Quindi questi sono i nostri stili css predefiniti per la nostra pagina del modulo che useremo per dimostrare come implementare la funzione tooltip usando i CSS.\n<\/p>\n<h3>\n  Creiamo Tooltip utilizzando i CSS<br \/>\n<\/h3>\n<h5>\n  Passaggio 4: stile CSS per descrizione comandi<br \/>\n<\/h5>\n<p>\n  Potresti aver notato che abbiamo utilizzato la classe ” <strong>tooltip<\/strong> ” nel nostro file html. Questo \u00e8 lo stile che applicheremo per il segno del punto interrogativo (“?”) che funger\u00e0 da suggerimento.\n<\/p>\n<pre><code>.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}<\/code><\/pre>\n<p>\n  Dobbiamo prima posizionare relativamente il tooltip applicando ” <strong>position: relative;<\/strong> ” stile. Il motivo del posizionamento relativo del tooltip \u00e8 che in seguito in questo metodo utilizzeremo <strong>pseudo elementi<\/strong> che possono essere posizionati in modo “Assoluto”. Quindi vogliamo che quelle pseudo classi “assolute” siano posizionate relativamente a questo elemento.\n<\/p>\n<p>\n  Successivamente stiamo dando un <strong>colore di sfondo nero<\/strong> per il tooltip usando il metodo rgba(),\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  in cui r,g,b sta per rosso, verde e blu e a sta per ‘ <strong>alfa<\/strong> ‘ che <strong>controlla l'opacit\u00e0<\/strong>.\n<\/p>\n<p>\n  Daremo uno sfondo nero al cerchio del tooltip e ne ridurremo l'opacit\u00e0 a 0,3 per farlo assomigliare a un <strong>colore verde scuro<\/strong>.\n<\/p>\n<p>\n  Successivamente applicheremo alcuni stili di riempimento di base e raggio del bordo al segno del punto interrogativo (“?”) per far sembrare buono il nostro tooltip.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  Con il CSS sopra, stiamo applicando il riempimento al cerchio che racchiude il “?”, e rendendo il raggio del bordo 100% per renderlo un cerchio completo.\n<\/p>\n<p>\n  La dimensione del carattere determina la dimensione di “?” segno, che usiamo come suggerimento in questo esempio.\n<\/p>\n<p>\n  Stiamo anche aggiungendo ” <strong>cursor:help;<\/strong> ” nel CSS, questo dar\u00e0 un punto interrogativo sotto il puntatore del mouse quando si passa sopra quell'elemento, come mostrato nell'immagine qui sotto.\n<\/p>\n<p>\n  Il toot-tip contiene del contenuto (in questo esempio stiamo dando maggiori informazioni riguardo ai caratteri che dovrebbero essere inclusi nel campo “password”).\n<\/p>\n<h5>\n  Passaggio 5: fornire il contenuto per la descrizione comandi all'interno dell'HTML<br \/>\n<\/h5>\n<p>\n  La prossima sfida davanti a noi \u00e8, dove inserire questo contenuto all'interno del tooltip?\n<\/p>\n<p>\n  Per eseguire questa operazione, aggiungeremo un <strong>attributo<\/strong> nel file HTML che abbiamo creato in precedenza.\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  Qui, non vogliamo aggiungere alcun markup extra, come creare un altro span per aggiungere il contenuto all'interno del tooltip.\n<\/p>\n<p>\n  Possiamo includere il contenuto per la descrizione comandi all'interno di questo intervallo.\n<\/p>\n<p>\n  Lo faremo aggiungendo un attributo ” <strong>data<\/strong> “. Il nome dell'attributo di dati qui sar\u00e0 ” <strong>tooltip<\/strong> “.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> \u00e8 il nostro attributo di dati utilizzando il quale aggiungiamo il contenuto che dovrebbe essere visualizzato all'interno del tooltip.\n<\/p>\n<p>\n  Successivamente, aggiungeremo le istruzioni relative al carattere che dovrebbe essere presente nella password, all'interno del nostro attributo data-tooltip.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Ora abbiamo <strong>aggiunto il testo<\/strong> che dovrebbe apparire all'interno del tooltip. Successivamente impareremo come far <strong>apparire questo testo all'interno del tooltip<\/strong> quando gli utenti passano il mouse sopra il segno del punto interrogativo.\n<\/p>\n<h5>\n  Passaggio 6: creazione di un contenitore di descrizione comandi utilizzando pseudo elementi<br \/>\n<\/h5>\n<p>\n  Per prima cosa, dobbiamo creare i contenitori all'interno dei quali deve essere visualizzato il contenuto del tooltip.\n<\/p>\n<p>\n  Per fare ci\u00f2, torniamo al file style.css e creiamo <strong>pseudo elementi<\/strong> per la classe <strong>.tooltip<\/strong>.\n<\/p>\n<p>\n  Creeremo <strong>::after<\/strong> e <strong>::before<\/strong> pseudo classi per far apparire il contenuto del nostro tooltip.\n<\/p>\n<p>\n  Fondamentalmente, usando una pseudo classe come ” <strong>::after<\/strong> ” puoi scegliere come target una posizione subito dopo l'elemento che usa la classe principale e lo stile di quella posizione.\n<\/p>\n<p>\n  Allo stesso modo, usando la pseudo classe ::before puoi modellare la posizione appena prima dell'elemento in cui viene usata la classe principale (in questo caso “?” \u00e8 quell'elemento).\n<\/p>\n<p>\n  \u00c8 una pseudo classe molto utile per iniettare contenuti extra in una pagina.\n<\/p>\n<p>\n  Creeremo una pseudo classe per “tootlip” come mostrato di seguito.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Stiamo creando una classe comune per gli stili ::before e ::after.\n<\/p>\n<p>\n  Qui, abbiamo <strong>assolutamente posizionato<\/strong> entrambi gli stili ::before e ::after, perch\u00e9 vogliamo che siano posizionati sopra il ‘punto interrogativo' e vogliamo che siano centrati sopra “?”.\n<\/p>\n<p>\n  Per rendere il tooltip centrato sopra il “?” dobbiamo usare il ” <strong>sinistra:50%;<\/strong> “attributo.\n<\/p>\n<p>\n  Ora useremo :: <strong>before<\/strong> per modellare il piccolo triangolo nella parte inferiore del nostro tooltip.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Il <strong>::after<\/strong> viene utilizzato per definire lo stile del contenuto all'interno del tooltip.\n<\/p>\n<p>\n  Vediamo come \u00e8 fatto.\n<\/p>\n<p>\n  Per prima cosa creeremo il piccolo triangolo nella parte inferiore del tooltip.\n<\/p>\n<pre><code>.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}<\/code><\/pre>\n<p>\n  Dovremmo usare <strong>il contenuto:””;<\/strong> attributo per mostrare che questo elemento non ha un contenuto. Poich\u00e9 abbiamo inserito del <strong>contenuto vuoto<\/strong>, ora possiamo definirlo.\n<\/p>\n<p>\n  Possiamo <strong>creare triangoli in CSS<\/strong> usando l' attributo <strong>border-width<\/strong>.\n<\/p>\n<p>\n  Con questa linea,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Abbiamo specificato che la larghezza del bordo in alto \u00e8 di 10 pixel, a destra \u00e8 di 8 pixel, in basso di 0 pixel ea sinistra di 8 pixel.\n<\/p>\n<p>\n  Questo creer\u00e0 un triangolo per noi.\n<\/p>\n<p>\n  Successivamente creeremo un <strong>bordo solido<\/strong> per questa sezione e <strong>renderemo trasparenti le aree destra, inferiore e sinistra<\/strong>, in modo che sia visibile solo l'area superiore del “triangolo”.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Dopo aver reso il bordo solido, applichiamo i colori per i lati superiore, destro, inferiore e sinistro del bordo.\n<\/p>\n<p>\n  Dovremmo usare lo stesso ” <strong>border-color:rgba();<\/strong> ” attributo qui, che abbiamo utilizzato per definire lo stile del cerchio attorno al punto interrogativo.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  Qui, abbiamo dato <strong>il colore nero<\/strong> (0,0,0) per la <strong>parte superiore<\/strong> del bordo e <strong>ridotto la sua opacit\u00e0 a 0,3<\/strong> per darci un colore verde scuro, proprio come abbiamo fatto per ottenere lo stile per il cerchio attorno al “?”.\n<\/p>\n<p>\n  Abbiamo nascosto le parti <strong>destra, inferiore e sinistra<\/strong> del bordo rendendo <strong>trasparente<\/strong> il file .\n<\/p>\n<p>\n  Anche se avessimo creato i bordi destro e sinistro, sono trasparenti. L'unico bordo con il colore \u00e8 il bordo superiore. Ci\u00f2 che far\u00e0 \u00e8 che il <strong>bordo nascosto a sinistra ea destra ci dar\u00e0 un effetto triangolo insieme al bordo superiore colorato<\/strong>.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Il risultato finale sar\u00e0 simile a questo.\n<\/p>\n<p>\n  Se fai una ricerca su Google per “i” ne saprai di pi\u00f9.\n<\/p>\n<p>\n  Gli attributi ” <strong>Margin-left<\/strong> ” e ” <strong>top<\/strong> ” sono usati per posizionare questo triangolo centrato sopra il cerchio.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  Ora <strong>abbiamo creato la coda triangolare<\/strong> nella parte inferiore del nostro tooltip, che punta al “?” cartello.\n<\/p>\n<p>\n  Successivamente, dobbiamo definire lo stile della regione del rettangolo arrotondato del tooltip in cui vengono visualizzate le informazioni. Per questo, useremo l' attributo <strong>::after<\/strong>.\n<\/p>\n<pre><code>.tooltip::after{\ncontent: \"some text\";\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}<\/code><\/pre>\n<p>\n  Quindi ho usato,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Nella sezione di apertura della pseudo classe <strong>.tooltip::after<\/strong>\n<\/p>\n<p>\n  Ora dobbiamo dare a questa sezione lo <strong>stesso colore di sfondo<\/strong> che abbiamo usato per creare la regione del triangolo (che \u00e8 nero, con un alfa\/opacit\u00e0 di 0.3).\n<\/p>\n<p>\n  Quindi ho aggiunto,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Poi ho centrato questa sezione con il nostro “punto interrogativo”, come prima. Sto usando una larghezza di 300 px per il rettangolo arrotondato e un margine di -150 px per centrarlo rispetto al punto interrogativo.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  Ora daremo il padding e renderemo i bordi del rettangolo arrotondati (applicando border-radius).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  Questo imposter\u00e0 anche il colore del testo all'interno del rettangolo arrotondato come bianco (#fff).\n<\/p>\n<p>\n  Ora la regione del rettangolo arrotondato che visualizza il contenuto \u00e8 pronta. Tuttavia, <strong>non \u00e8 posizionato correttamente<\/strong>. La pagina HTML corrente avr\u00e0 un aspetto simile a quello mostrato di seguito.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Fondamentalmente il rettangolo arrotondato <strong>si sovrappone sopra la regione del “triangolo”<\/strong> che avevamo creato, poich\u00e9 sia \u200b\u200b::before che ::after utilizzano lo stesso margine e sono posizionati 20 pixel sopra il punto interrogativo.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Dobbiamo <strong>portare la casella del rettangolo arrotondato appena sopra la sezione triangolare<\/strong> che abbiamo creato in precedenza, in modo che entrambi insieme appaiano come una <strong>finestra di chat<\/strong>.\n<\/p>\n<p>\n  Non sappiamo quale sia l'altezza esatta del rettangolo arrotondato per posizionarlo appena sopra il triangolo, quello che vogliamo \u00e8 trasformare <strong>verticalmente il 100% dell'altezza del rettangolo arrotondato<\/strong> in modo che venga posizionato appena sopra il triangolo.\n<\/p>\n<p>\n  Poich\u00e9 entrambi questi elementi (triangolo e rettangolo arrotondato) usano, <code>top: -20px;<\/code>dobbiamo solo <strong>trasformare la parte superiore del rettangolo arrotondato verticalmente in un'altezza in pixel<\/strong> uguale alla sua stessa altezza.\n<\/p>\n<p>\n  Per questo usiamo,<code>transform: translateY(-100%);<\/code>\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Ora abbiamo una struttura adeguata che assomiglia a una finestra informativa.\n<\/p>\n<h5>\n  Passaggio 7: ottenere le informazioni effettive all'interno del tooltip<br \/>\n<\/h5>\n<p>\n  La nostra sfida finale qui \u00e8 ottenere il contenuto giusto, che contenga pi\u00f9 informazioni, all'interno del tooltip.\n<\/p>\n<p>\n  Ricorda che abbiamo inserito il contenuto che dovrebbe apparire all'interno del tooltip nel nostro file HTML.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Usando i CSS possiamo prendere un attributo dall'elemento HTML. Lo faremo usando <strong>attr()<\/strong> nel <strong>.tooltip::after<\/strong> pseudo CSS.\n<\/p>\n<p>\n  Quindi, invece di,<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Useremo<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  Qui, ” <strong>data-tooltip<\/strong> ” \u00e8 il nostro attributo HTML.\n<\/p>\n<p>\n  Usando l'attributo che abbiamo dato per il contenuto in HTML saremo in grado di chiamare quel contenuto e mostrarlo all'interno del nostro pseudo CSS. Il risultato di questo sar\u00e0 come mostrato di seguito,\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Adesso. tutto quello che dobbiamo fare \u00e8 rendere il nostro tooltip invisibile all'inizio e apparire solo quando gli utenti passano il mouse sopra il punto interrogativo (?).\n<\/p>\n<p>\n  Questo \u00e8 molto facile da fare.\n<\/p>\n<p>\n  Per rendere invisibile il tooltip all'inizio renderemo <strong>la sua opacit\u00e0 “0”<\/strong> nel seguente pseudo CSS che abbiamo scritto prima.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  Per l'effetto Hover aggiungeremo un nuovo pseudo CSS nella parte inferiore del nostro file style.css. Impostiamo <strong>l'opacit\u00e0 “1” per lo stato al passaggio del mouse<\/strong> in modo che la descrizione comandi venga visualizzata solo al passaggio del mouse.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  Questo pseudo CSS determina solo lo stato al passaggio del mouse, poich\u00e9 abbiamo utilizzato “:hover” dopo il CSS principale .tooltip\n<\/p>\n<p>\n  Ora il nostro tooltip CSS \u00e8 pronto.\n<\/p>\n<p>\n  Ma la transizione del tooltip non sar\u00e0 agevole come ci si aspetterebbe.\n<\/p>\n<p>\n  Puoi rendere gli effetti di transizione ancora migliori usando i CSS. Per questo, devi solo aggiungere la seguente regola di transizione in CSS per ::before e ::after pseudo classi.\n<\/p>\n<p>\n  Per saperne di pi\u00f9 sugli stili di transizione che possono essere realizzati utilizzando i CSS, leggi il nostro articolo ” <a href=\"https:\/\/inform.click\/it\/dai-vita-alle-tue-pagine-web-con-animazioni-e-transizioni-css\/\" title=\"Animazioni e transizioni CSS\">Animazioni e transizioni CSS<\/a> “.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  Questo processo \u00e8 molto pi\u00f9 semplice e meno complicato rispetto all'implementazione del tooltip tramite JavaScript.\n<\/p>\n<p>\n  Per tuo riferimento, trova il file HTML e CSS finale per esercitarti.\n<\/p>\n<h4>\n  File HTML finale per testare il tooltip<br \/>\n<\/h4>\n<pre><code>\n\n\n<\/code><\/pre>\n<p><meta charset=\"utf-8\" \/><\/p>\n<pre>\n<\/pre>\n<p><title><br \/>\n  CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<h4>\n  <code>File CSS finale Creazione di una descrizione comando<\/code><br \/>\n<\/h4>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}\n \nform{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}\n \nformlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}\n \nforminput{\nmargin: 010px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #fff;\n}\n \n\/* --------- Tooltip Styles ---------- *\/\n \n.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}\n.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\ntransition: allease0.3s;\n}\n.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}\n.tooltip::after{\ncontent: attr(data-tooltip);\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}\n \n\/* Hover states *\/\n \n.tooltip:hover::before, .tooltip:hover::after{\nopacity: 1;\n}<\/code><\/code><\/pre>\n<h3>\n  Dimostrazione dal vivo<br \/>\n<\/h3>\n<p>\n  Guarda il <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">Tooltip Live CSS<\/a> in azione.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte di registrazione: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/05\/11\/create-tooltip-using-css\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Probabilmente sai gi\u00e0 cos’\u00e8 un tooltip. Un tooltip \u00e8 un’icona o un testo che, quando ci si passa sopra, ci fornisce maggiori informazioni in una bolla o pop-up. Normalmente trovi i suggerimenti nei moduli, ma puoi posizionarli ovunque gli utenti richiedano maggiori informazioni. Nell’immagine sopra, il cerchio con il punto interrogativo all’interno mostra un suggerimento. Quando ci si passa sopra, questo tooltip fornisce maggiori informazioni sui tipi di caratteri che la tua password deve includere. Puoi ottenere framework per implementare i suggerimenti nel tuo sito Web, ma la maggior parte delle volte questi framework utilizzano JavaScript per ottenere questo risultato. In questo \u2026<\/p>\n","protected":false},"author":1,"featured_media":223378,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[69,121,56],"tags":[],"class_list":["post-255352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-7","category-strumenti-web","category-web-e-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/comments?post=255352"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media?parent=255352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/categories?post=255352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/tags?post=255352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}