Questo articolo dimostrerà il tooltip utilizzando il semplice JavaScript.
Come creare una semplice descrizione comandi JavaScript?
Per creare una descrizione comando utilizzando JavaScript, utilizzare il ' passaggio del mouse ' E ' mouseout 'eventi. Segui gli esempi riportati di seguito per una migliore comprensione.
Esempio 1: Tooltip Utilizzo di JavaScript
Nell'esempio fornito, creeremo un tooltip in puro JavaScript e stiliamo anche il tooltip usando il ' stile 'attributo.
Innanzitutto, crea un testo in cui vogliamo mostrare un tooltip sull'evento mouseover:
< h5 id = 'testo' > Linux h5 >
Ottenere il testo in cui verrà visualizzato il tooltip utilizzando il ' getElementById() ' metodo:
dove lh = documento. getElementById ( 'testo' ) ;
Ora, chiama il ' addEventListener() ” metodo passando il “ passaggio del mouse ” evento e una funzione() come parametro. Nella funzione definita, in primo luogo, creeremo un tooltip creando un ' div ', impostare il testo che verrà mostrato al passaggio del mouse e impostare alcuni stili del tooltip utilizzando l'elemento ' stile 'attributo. Infine, aggiungi il tooltip usando il ' appendChild() ' metodo:
ss. addEventListener ( 'mouse sopra' , funzione ( ) {era tooltip = documento. createElement ( 'div' ) ;
tooltip. innerHTML = 'Un miglior sito web per imparare le abilità' ;
tooltip. stile . visibilità = 'visibile' ;
tooltip. stile . posizione = 'assoluto' ;
tooltip. stile . colore di sfondo = 'rgb(107, 101, 101)' ;
tooltip. stile . imbottitura = '5px' ;
tooltip. stile . borderRadius = '3px' ;
tooltip. stile . colore = 'bianco' ;
tooltip. stile . Sinistra = 'cinquanta%' ;
tooltip. stile . larghezza = '200px' ;
documento. corpo . appendChild ( tooltip ) ;
} ) ;
Qui, utilizza il ' mouseout ” evento che rimuoverà il tooltip mentre il cursore si allontanerà dal testo:
ss. addEventListener ( 'topo fuori' , funzione ( ) {
documento. corpo . removeChild ( tooltip ) ;
} ) ;
Produzione
Esempio 2: Tooltip Utilizzo di JavaScript con CSS
Puoi anche creare un tooltip in JavaScript con CSS.
Per fare ciò, crea un'area per mostrare il testo del tooltip utilizzando il tag e assegna un id ' #myTooltip ”:
< id span = 'myTooltip' > span >Ottieni i riferimenti del testo e il tooltip usando il ' getElementById() ' metodo:
dove lh = documento. getElementById ( 'testo' ) ;era tooltip = documento. getElementById ( 'myTooltip' ) ;
Chiama il tooltip sul ' passaggio del mouse ” impostando il testo nella funzione utilizzando il “ innerHTML ' proprietà:
ss. addEventListener ( 'mouse sopra' , funzione ( ) {tooltip. stile . visibilità = 'visibile' ;
tooltip. innerHTML = 'Un miglior sito web per imparare le competenze' ;
} ) ;
Nascondere il suggerimento sul ' mouseout ” evento impostando il “ visibilità ” proprietà a “ nascosto ”:
ss. addEventListener ( 'mouse fuori' , funzione ( ) {tooltip. stile . visibilità = 'nascosto' ;
} ) ;
Crea un documento d'identità ' #myTooltip ” nel foglio di stile che definirà il tooltip:
#myTooltip {visibilità : nascosto ;
larghezza : 200 pixel ;
Con - indice : 1 ;
sfondo - colore : rgb ( 107 , 101 , 101 ) ;
testo - allineare : centro ;
colore : bianco ;
imbottitura : 5px 0 ;
confine - raggio : 3px ;
Sinistra : cinquanta %;
}
Come puoi vedere, il tooltip è stato implementato con successo sul testo:
Come creare una descrizione comandi utilizzando HTML e CSS?
Puoi anche creare una descrizione comandi senza JavaScript. Nel file HTML, crea il testo ' Linux ”, dove verrà mostrato il tooltip al passaggio del mouse su di esso. Crea l'elemento per impostare il testo per il tooltip all'interno del tag di intestazione/testo :
Linux
< span classe = 'testo descrizione comandi' >
Una piattaforma per acquisire competenze
span >
h5 >
Nel foglio di stile, crea una classe o un id che verrà assegnato agli elementi HTML. Qui, creeremo una classe ' tooltip ” che è assegnato all'intestazione:
. tooltip {posizione : parente ;
Schermo : in linea - bloccare ;
}
Definisci una classe “ tooltiptext ” per modellare il testo del tooltip e assegnargli l'HTML “ etichetta ':
. tooltiptext {visibilità : nascosto ;
larghezza : 150 pixel ;
sfondo - colore : rgb ( 107 , 101 , 101 ) ;
colore : #F F F ;
testo - allineare : centro ;
imbottitura : 5px 0 ;
confine - raggio : 3px ;
posizione : assoluto ;
Con - indice : 1 ;
metter il fondo a : 125 %;
Sinistra : cinquanta %;
margine - Sinistra : - 60 pixel ;
opacità : 0 ;
transizione : opacità 0.3s ;
}
Impostato ' librarsi ” effetto con il “ tooltip ” class per mostrare il tooltip sull'effetto hover:
. tooltip : librarsi. tooltiptext {visibilità : visibile ;
opacità : 1 ;
}
Produzione
Abbiamo compilato tutte le istruzioni necessarie relative al semplice tooltip JavaScript.
Conclusione
Per creare una descrizione comando utilizzando JavaScript, utilizzare il ' passaggio del mouse ' E ' mouseout ” events, che mostra il tooltip al passaggio del mouse sull'elemento e lo nasconde quando viene attivato l'evento mouseout. Per definire lo stile della descrizione comandi, utilizzare il ' stile ” attributo in JavaScript. In questo articolo, abbiamo dimostrato i migliori esempi possibili di creazione di un tooltip utilizzando JavaScript semplice, JavaScript con CSS e un tooltip senza JavaScript.