Tooltip JavaScript semplice

Una descrizione di strumenti è un popup piccolo e informativo che viene visualizzato quando un utente si libra su un elemento, come un pulsante o un testo. Più specificamente, lo scopo di un tiro è quello di fornire ulteriori informazioni o chiarimenti sull'elemento in questione.

Questo articolo dimostrerà il tiro di strumento usando JavaScript semplice.

Come creare un semplice strumento JavaScript?

Per creare un tiro di strumento usando JavaScript, usa "Mouseover" E "Mouseout"Eventi. Segui gli esempi di seguito per una migliore comprensione.

Esempio 1: Tooltip usando JavaScript

Nell'esempio dato, creeremo un tiro di strumento in puro javascript e modelleremo anche la descrizione degli strumenti usando "stile"Attributo.

Innanzitutto, crea un testo in cui vogliamo mostrare una descrizione di strumenti sull'evento MouseOver:

Linuxhint

Ottieni il testo in cui apparirà il tirogetElementById ()" metodo:

var lh = documento.getElementById ("testo");

Ora, chiama il "addEventListener ()Metodo "passando il"Mouseover"Event and a function () come parametro. Nella funzione definita, in primo luogo, creeremo un tiro di strumento creando un "div"Elemento, impostare il testo che verrà mostrato sul mouse e impostando un po 'di styling della descrizione degli strumenti usando"stile"Attributo. Infine, aggiungi la titoli di strumento usando "appendChild ()" metodo:

lh.addEventListener ("MouseOver", function ()
VAR ToolTip = Documento.createElement ("div");
Tooltip.InnerHtml = "Un sito Web migliore per apprendere le competenze";
Tooltip.stile.visibilità = "visibile";
Tooltip.stile.posizione = "assoluto";
Tooltip.stile.backgroundColor = "RGB (107, 101, 101)";
Tooltip.stile.padding = "5px";
Tooltip.stile.BorderRadius = "3px";
Tooltip.stile.color = "bianco";
Tooltip.stile.Left = "50%";
Tooltip.stile.larghezza = "200px";
documento.corpo.AppendChild (ToolTip);
);

Qui, utilizza il "Mouseout"Evento che rimuoverà la descrizione degli strumenti mentre il cursore si allontanerà dal testo:

lh.addEventListener ("Mouseout", function ()
documento.corpo.REMOVECHILD (ToolTip);
);

Produzione

Esempio 2: Tooltip usando JavaScript con CSS

Puoi anche creare una descrizione di strumenti in JavaScript con CSS.

Per fare ciò, crea un'area per mostrare il testo della descrizione degli strumenti utilizzando il tag e assegnare un ID "#mytooltip":

= "MyToolTip">

Ottieni i riferimenti del testo e della descrizione degli strumenti usando "getElementById ()" metodo:

var lh = documento.getElementById ("testo");
VAR ToolTip = Documento.getElementById ("MyToolTip");

Chiama il titoli su "Mouseover"Evento impostando il testo nella funzione usando il"Innerhtml" proprietà:

lh.addEventListener ("MouseOver", function ()
Tooltip.stile.visibilità = "visibile";
Tooltip.InnerHtml = "Un sito Web migliore per apprendere le competenze";
);

Nascondi la descrizione degli strumenti su "Mouseout"Evento impostando il"visibilità"Proprietà a"nascosto":

lh.addEventListener ("Mouseout", function ()
Tooltip.stile.visibilità = "nascosto";
);

Crea un ID "#mytooltip"Nel foglio di stile che modellerà la descrizione degli strumenti:

#mytooltip
Visibilità: nascosto;
larghezza: 200px;
Z-INDEX: 1;
Background-color: RGB (107, 101, 101);
Testo-align: centro;
colore bianco;
imbottitura: 5px 0;
raggio di confine: 3px;
A sinistra: 50%;

Come puoi vedere che il tiro è stato implementato con successo sul testo:

Come creare ToolTip utilizzando HTML e CSS?

Puoi anche creare un tiro di strumento senza JavaScript. Nel file HTML, crea il testo "Linuxhint", Dove verrà mostrato il tiro. Crea elemento per impostare il testo per la titoli all'interno dell'intestazione/testo

etichetta:

Linuxhint
class = "ToolTipText">
Una piattaforma per imparare le abilità

Nel foglio di stile, crea una classe o un ID che verrà assegnato agli elementi HTML. Qui creeremo una classe "Tooltip"Questo è assegnato all'intestazione:

.ToolTip
Posizione: relativo;
display: blocco inline;

Definisci una classe "ToolTipText"Per modellare il testo del tooltip e assegnarlo l'HTML""Tag:

.ToolTipText
Visibilità: nascosto;
larghezza: 150px;
Background-color: RGB (107, 101, 101);
Colore: #FFF;
Testo-align: centro;
imbottitura: 5px 0;
raggio di confine: 3px;
Posizione: assoluto;
Z-INDEX: 1;
In basso: 125%;
A sinistra: 50%;
margine -sinistra: -60px;
opacità: 0;
transizione: opacità 0.3s;

Impostato "molare"Effetto con il"Tooltip"Classe per mostrare la descrizione degli strumenti sull'effetto hover:

.Tooltip: Hover .ToolTipText
Visibilità: visibile;
opacità: 1;

Produzione

Abbiamo compilato tutte le istruzioni necessarie pertinenti al semplice strumento JavaScript.

Conclusione

Per creare un tiro di strumento usando JavaScript, usa "Mouseover" E "Mouseout"Eventi, che mostrano il tiro di strumento su Hover sull'elemento e lo nasconde quando viene attivato l'evento Mouseout. Per styling the Tooltip, usa il “stile"Attributo in JavaScript. In questo articolo, abbiamo dimostrato i migliori esempi possibili per la creazione di una descrizione di strumenti utilizzando JavaScript semplice, JavaScript con CSS e un tiro di strumento senza JavaScript.