Einfacher JavaScript -Tooltip

Ein Tooltip ist ein kleines, informatives Popup, das anzeigt, wenn ein Benutzer über ein Element schwebt, z. B. eine Schaltfläche oder einen Text. Insbesondere besteht der Zweck eines Tooltip darin, zusätzliche Informationen oder Klärung über das betreffende Element bereitzustellen.

In diesem Artikel wird der Tooltip mit einfachem JavaScript demonstriert.

So erstellen Sie ein einfaches JavaScript -Tooltip?

Verwenden Sie die “zum Erstellen eines Tooltips mit JavaScript die“Mausover" Und "Mausout" Veranstaltungen. Folgen Sie den folgenden Beispielen für ein besseres Verständnis.

Beispiel 1: Tooltip Verwenden Sie JavaScript

Im angegebenen Beispiel erstellen wir einen Tooltip in reinem JavaScript und stylen auch das Tooltip mit der “Stil”Attribut.

Erstellen Sie zunächst einen Text, in dem wir einen Tooltip auf dem Mausover -Event anzeigen möchten:

LinuxHint

Holen Sie sich den Text, in dem der Tooltip mit der “angezeigt wirdGetElementById ()" Methode:

var lh = dokument.GetElementById ("Text");

Nennen Sie jetzt das "AddEventListener ()Methode durch Übergabe der “MausoverEreignis und eine Funktion () als Parameter. In der definierten Funktion erstellen wir zunächst ein Tooltip, indem wir eine “erstellen“divElement, den Text festlegen, der auf dem Schwebedruck angezeigt wird, und ein gewisses Styling des Tooltips mit der “festlegenStil”Attribut. Fügen Sie zum Schluss den Tooltip mit der "hinzu"appendChild ()" Methode:

lh.addEventListener ("mouseover", function ()
var tooltip = document.CreateLement ("Div");
Tooltip.Innerhtml = "Eine beste Website zum Erlernen von Fähigkeiten";
Tooltip.Stil.Sichtbarkeit = "sichtbar";
Tooltip.Stil.Position = "absolut";
Tooltip.Stil.BIGINGCOLOR = "RGB (107, 101, 101)";
Tooltip.Stil.padding = "5px";
Tooltip.Stil.Borderradius = "3px";
Tooltip.Stil.color = "weiß";
Tooltip.Stil.links = "50%";
Tooltip.Stil.width = "200px";
dokumentieren.Körper.appendChild (Tooltip);
);

Hier verwenden Sie die “MausoutEreignis, das den Tooltip entfernen wird, während der Cursor vom Text weg ist:

lh.AddEventListener ("Mausout", function ()
dokumentieren.Körper.removechild (tooltip);
);

Ausgang

Beispiel 2: Tooltip Verwenden Sie JavaScript mit CSS

Sie können auch ein Tooltip in JavaScript mit CSS erstellen.

Erstellen Sie dazu einen Bereich, um den Text des Tooltip mithilfe des Tags anzuzeigen und eine ID zuzuweisen#mytooltip”:

= "mytooltip">

Holen Sie sich die Referenzen des Textes und den Tooltip mit der “GetElementById ()" Methode:

var lh = dokument.GetElementById ("Text");
var tooltip = document.GetElementById ("mytooltip");

Rufen Sie den Tooltip auf dem “an"MausoverEreignis durch Einstellen des Textes in der Funktion mit der “Innerhtml" Eigentum:

lh.addEventListener ("mouseover", function ()
Tooltip.Stil.Sichtbarkeit = "sichtbar";
Tooltip.Innerhtml = "Eine beste Website zum Erlernen von Fähigkeiten";
);

Verstecken Sie den Tooltip auf der “MausoutEreignis durch Einstellen der “Sichtweite”Eigentum zu“versteckt”:

lh.AddEventListener ("Mausout", function ()
Tooltip.Stil.Sichtbarkeit = "versteckt";
);

Erstellen Sie eine ID “#mytooltip”In dem Stilblatt, das den Tooltip stymt:

#mytooltip
Sichtbarkeit: versteckt;
Breite: 200px;
Z-Index: 1;
Hintergrundfarbe: RGB (107, 101, 101);
Text-Align: Mitte;
Farbe weiß;
Polsterung: 5px 0;
Border-Radius: 3px;
Links: 50%;

Wie Sie sehen, dass der Tooltip erfolgreich im Text implementiert wurde:

So erstellen Sie Tooltip mithilfe von HTML und CSS?

Sie können auch ein Tooltip ohne JavaScript erstellen. Erstellen Sie in der HTML -Datei den Text “LinuxHint”, Wo der Tooltip gezeigt wird, während er darauf schwebt. Element erstellen, um den Text für den Tooltip in der Überschrift/des Textes festzulegen

Schild:

LinuxHint
class = "tooltipText">
Eine Plattform, um Fähigkeiten zu erlernen

Erstellen Sie in dem Stylesheet eine Klasse oder eine ID, die den HTML -Elementen zugewiesen wird. Hier werden wir eine Klasse erstellen “TooltipDas ist der Überschrift zugeordnet:

.Tooltip
Position: Relativ;
Anzeige: Inline-Block;

Eine Klasse definieren “TooltipText"Um den Text des Tooltip zu stylen und ihm die HTML zuzuordnen"" Schild:

.TooltipText
Sichtbarkeit: versteckt;
Breite: 150px;
Hintergrundfarbe: RGB (107, 101, 101);
Farbe: #fff;
Text-Align: Mitte;
Polsterung: 5px 0;
Border-Radius: 3px;
Position: absolut;
Z-Index: 1;
unten: 125%;
Links: 50%;
Rand -Links: -60px;
Deckkraft: 0;
Übergang: Deckkraft 0.3s;

Satz "schweben"Effekt mit dem"Tooltip”Klasse, um den Tooltip für den Hover -Effekt anzuzeigen:

.Tooltip: Schwebe .TooltipText
Sichtbarkeit: sichtbar;
Deckkraft: 1;

Ausgang

Wir haben alle erforderlichen Anweisungen zusammengestellt.

Abschluss

Verwenden Sie die “zum Erstellen eines Tooltips mit JavaScript die“Mausover" Und "MausoutEreignisse, die den Tooltip auf dem Element auf dem Element anzeigen und versteckt, wenn das Mausout -Ereignis ausgelöst wird. Verwenden Sie zum Styling des Tooltip die “Stil”Attribut in JavaScript. In diesem Artikel haben wir die bestmöglichen Beispiele für das Erstellen eines Tooltip mit Plain JavaScript, JavaScript mit CSS und einem Tooltip ohne JavaScript gezeigt.