Dieser Artikel demonstriert die QuickInfo mit einfachem JavaScript.
Wie erstelle ich einen einfachen JavaScript-Tooltip?
Um einen Tooltip mit JavaScript zu erstellen, verwenden Sie das „ Mouseover ' Und ' Maus aus ' Veranstaltungen. Folgen Sie den unten angegebenen Beispielen zum besseren Verständnis.
Beispiel 1: Tooltip mit JavaScript
Im gegebenen Beispiel erstellen wir einen Tooltip in reinem JavaScript und gestalten den Tooltip auch mit dem „ Stil ” Attribut.
Erstellen Sie zunächst einen Text, in dem wir einen Tooltip zum Mouseover-Ereignis anzeigen möchten:
< h5-ID = 'Text' > Linux h5 >
Rufen Sie den Text ab, an dem der Tooltip angezeigt wird, indem Sie das „ getElementById() ' Methode:
wo lh = dokumentieren. getElementById ( 'Text' ) ;
Rufen Sie jetzt die „ addEventListener() “-Methode durch Übergeben der „ Mouseover ” event und eine function() als Parameter. In der definierten Funktion erstellen wir zunächst einen Tooltip, indem wir ein „ div ”-Element, legen Sie den Text fest, der beim Hover angezeigt wird, und legen Sie mithilfe des „ Stil ” Attribut. Fügen Sie schließlich den Tooltip mit dem „ appendChild() ' Methode:
lh. addEventListener ( 'Maus drüber' , Funktion ( ) {war Kurzinfo = dokumentieren. createElement ( 'div' ) ;
Kurzinfo. innerHTML = 'Eine beste Website zum Erlernen von Fähigkeiten' ;
Kurzinfo. Stil . Sichtweite = 'sichtbar' ;
Kurzinfo. Stil . Position = 'absolut' ;
Kurzinfo. Stil . Hintergrundfarbe = 'rgb(107, 101, 101)' ;
Kurzinfo. Stil . Polsterung = '5px' ;
Kurzinfo. Stil . RandRadius = '3px' ;
Kurzinfo. Stil . Farbe = 'Weiss' ;
Kurzinfo. Stil . links = 'fünfzig%' ;
Kurzinfo. Stil . Breite = '200px' ;
dokumentieren. Körper . Kind anhängen ( Kurzinfo ) ;
} ) ;
Verwenden Sie hier das „ Maus aus ”-Ereignis, das den Tooltip entfernt, während der Cursor vom Text weggeht:
lh. addEventListener ( 'Maus raus' , Funktion ( ) {
dokumentieren. Körper . Kind entfernen ( Kurzinfo ) ;
} ) ;
Ausgang
Beispiel 2: QuickInfo zur Verwendung von JavaScript mit CSS
Sie können einen Tooltip auch in JavaScript mit CSS erstellen.
Erstellen Sie dazu mit dem Tag einen Bereich, in dem der Text des Tooltips angezeigt wird, und weisen Sie ihm eine ID zu. #meinTooltip “:
< Span-ID = 'meinTooltip' > Spanne >Holen Sie sich die Referenzen des Textes und den Tooltip mit dem „ getElementById() ' Methode:
wo lh = dokumentieren. getElementById ( 'Text' ) ;war Kurzinfo = dokumentieren. getElementById ( 'meinTooltip' ) ;
Rufen Sie den Tooltip auf dem „ Mouseover ”-Ereignis, indem Sie den Text in der Funktion mit dem “ innerHTML ' Eigentum:
lh. addEventListener ( 'Maus drüber' , Funktion ( ) {Kurzinfo. Stil . Sichtweite = 'sichtbar' ;
Kurzinfo. innerHTML = 'Eine beste Website zum Erlernen von Fähigkeiten' ;
} ) ;
Blenden Sie den Tooltip auf dem „ Maus aus ” Ereignis durch Setzen des „ Sichtweite „Eigenschaft zu“ versteckt “:
lh. addEventListener ( 'Maus aus' , Funktion ( ) {Kurzinfo. Stil . Sichtweite = 'versteckt' ;
} ) ;
Erstellen Sie eine ID “ #meinTooltip “ im Stylesheet, das den Tooltip formatiert:
#meinTooltip {Sichtweite : versteckt ;
Breite : 200px ;
Mit - Index : 1 ;
Hintergrund - Farbe : rgb ( 107 , 101 , 101 ) ;
Text - ausrichten : Center ;
Farbe : Weiss ;
Polsterung : 5px 0 ;
Grenze - Radius : 3px ;
links : fünfzig %;
}
Wie Sie sehen können, wurde der Tooltip erfolgreich in den Text implementiert:
Wie erstelle ich einen Tooltip mit HTML und CSS?
Sie können einen Tooltip auch ohne JavaScript erstellen. Erstellen Sie in der HTML-Datei den Text „ Linux “, wo der Tooltip angezeigt wird, wenn Sie mit der Maus darüber fahren. Erstellen Sie das -Element, um den Text für den Tooltip innerhalb des Überschrift/Text--Tags festzulegen:
Linux
< Spanne Klasse = 'Tooltiptext' >
Eine Plattform zum Erlernen von Fähigkeiten
Spanne >
h5 >
Erstellen Sie im Stylesheet eine Klasse oder eine ID, die den HTML-Elementen zugewiesen wird. Hier erstellen wir eine Klasse „ Kurzinfo “, die der Überschrift zugeordnet ist:
. Kurzinfo {Position : relativ ;
Anzeige : im Einklang - Block ;
}
Definiere eine Klasse “ Kurzinfotext ” um den Text des Tooltips zu stylen und ihm den HTML-Code zuzuweisen “ ' Schild:
. Kurzinfotext {Sichtweite : versteckt ;
Breite : 150px ;
Hintergrund - Farbe : rgb ( 107 , 101 , 101 ) ;
Farbe : #F f f ;
Text - ausrichten : Center ;
Polsterung : 5px 0 ;
Grenze - Radius : 3px ;
Position : absolut ;
Mit - Index : 1 ;
Unterseite : 125 %;
links : fünfzig %;
Rand - links : - 60px ;
Opazität : 0 ;
Übergang : Deckkraft 0,3s ;
}
Satz ' schweben ” Effekt mit dem “ Kurzinfo ”-Klasse, um den Tooltip zum Hover-Effekt anzuzeigen:
. Kurzinfo : schweben . Kurzinfotext {Sichtweite : sichtbar ;
Opazität : 1 ;
}
Ausgang
Wir haben alle notwendigen Anweisungen für den einfachen JavaScript-Tooltip zusammengestellt.
Abschluss
Um einen Tooltip mit JavaScript zu erstellen, verwenden Sie das „ Mouseover ' Und ' Maus aus ”-Ereignisse, die den Tooltip beim Hovern auf das Element anzeigen und ausblenden, wenn das Mouseout-Ereignis ausgelöst wird. Verwenden Sie zum Gestalten des Tooltips das „ Stil ”-Attribut in JavaScript. In diesem Artikel haben wir die bestmöglichen Beispiele für die Erstellung einer QuickInfo mit einfachem JavaScript, JavaScript mit CSS und einer QuickInfo ohne JavaScript gezeigt.