Dall'autore: Ciao. Un suggerimento è un piccolo testo esplicativo che appare quando passi con il mouse su un elemento, di solito un'immagine. Oggi vedremo come è possibile creare un tooltip in html in diversi modi.
Richiesta standard
Per impostazione predefinita, l'attributo title è responsabile della visualizzazione del testo esplicativo. Può essere indicato a vari elementi, ma di solito viene utilizzato solo per le immagini per spiegare cosa è raffigurato su di esse.
In uno degli articoli precedenti, ho usato l'immagine di una tigre per mostrare come lavorare con le dimensioni dell'immagine. Se non ti dispiace, userò di nuovo questa immagine. Quindi, per visualizzare il tooltip, devi solo aggiungere l'attributo title e scriverci il testo richiesto.
< img src = "tiger.jpg" title = "Questa è una tigre" > |
Può essere una parola o più frasi. Ed ecco come appare:
La descrizione comando viene visualizzata in modo fluido, non subito dopo il passaggio del mouse, ma dopo un po' di tempo. Questo è il comportamento predefinito.
Il problema principale con un simile tooltip è che non può essere stilizzato. Come risolvere questo problema? Dovremo fare il suggerimento in altri modi. Ora te ne mostro un paio.
Metodo CSS puro
Un modo molto interessante che ti consente di visualizzare magnificamente un suggerimento per un'immagine. Il markup html è semplice, solo l'immagine deve essere racchiusa in un blocco contenitore, a cui appenderemo un identificatore per farvi riferimento in seguito negli stili:
< div id = "tiger" data - name = "Tigre di Sumatra"> < img src = "tiger.jpg" > < / div > |
Solo l'attributo data-name può essere incomprensibile per te. Il fatto è che questo è un cosiddetto attributo di dati, che da solo non fa nulla, ma il suo valore può essere utilizzato in css e javascript, il che lo rende utile in alcuni casi. Vedrai questo dopo.
Quindi, per prima cosa, descriviamo gli stili per il contenitore. Abbiamo bisogno di un posizionamento relativo perché posizioneremo assolutamente il blocco con il testo esplicativo in modo che il posizionamento avvenga rispetto al blocco padre e non all'intera pagina.
#tiger (posizione: relativa; display: blocco in linea;)
#tigre ( posizione: relativa; display: in linea - blocco; |
La visualizzazione del blocco in linea impedirà al blocco (e con esso il blocco con il suggerimento che creeremo) di estendersi fino all'intera larghezza della finestra. Resta da creare il tooltip stesso. È molto comodo farlo in css usando pseudo-elementi. Come questo:
#tiger: hover: after (content: attr (data-name); position: absolute; left: 0; bottom: 0; background: rgba (5,13,156, .55); color: #fff; text-align: center ; font-family: corsivo; font-size: 14px; padding: 3px 0; width: 100%;)
#tiger: hover: dopo ( contenuto: attr (dati - nome); posizione: assoluta; sinistra: 0; in basso: 0; sfondo: rgba (5, 13, 156,. 55); colore: #fff; testo - allinea: centro; carattere - famiglia: corsivo; carattere - dimensione: 14px; imbottitura: 3px 0; larghezza: 100%; |
C'è molto codice, ma non c'è niente di complicato qui. Il selettore #tiger: hover: after significa quanto segue: quando passiamo con il mouse su un blocco con un'immagine, dobbiamo creare lo pseudo-elemento after (e quindi le regole sono elencate tra parentesi graffe). La proprietà content: attr (data-name) imposta il valore del testo per il blocco. Sarà uguale a quanto scritto nell'attributo data-name del blocco wrapper dell'immagine.
Questo suggerimento appare quando passi con il mouse sull'immagine, ma a differenza di quello standard, lo fa bruscamente e l'aspetto stesso si verifica direttamente al momento del passaggio del mouse. In questo caso, non è possibile implementare l'aspetto uniforme, poiché le transizioni uniformi non sono supportate per gli pseudo-elementi.
Metodo 2. CSS pulito e aspetto liscio
Tuttavia, riscrivendo un po' il codice, è possibile ottenere un aspetto uniforme del tooltip e, ancora, senza utilizzare javascript.
Per vedere da soli i 2 effetti, che ti mostrerò in seguito, consiglio di aprire il blocco note o un qualsiasi comodo editor di codice e ripetere tutto dopo di me. È vero, per questo devi ancora collegare un file di stile, sebbene gli stili possano essere scritti anche in html nei tag