Vanlig JavaScript ToolTip

En verktøytip er en liten, informasjonsmessig popup som vises når en bruker henger over et element, for eksempel en knapp eller tekst. Mer spesifikt er formålet med et verktøytips å gi tilleggsinformasjon eller avklaring om det aktuelle elementet.

Denne artikkelen vil demonstrere verktøytips ved hjelp av vanlig javascript.

Hvordan lage et vanlig JavaScript -verktøytip?

For å opprette en verktøytips ved hjelp av JavaScript, bruk "mus over”Og“Mouseout" arrangementer. Følg eksemplene under gitt for en bedre forståelse.

Eksempel 1: ToolTip ved hjelp av JavaScript

I det gitte eksemplet vil vi lage en verktøytips i ren javascript og også style verktøytipset ved å bruke "stil" Egenskap.

Først må du lage en tekst der vi ønsker å vise en verktøytips på Mouseover -hendelsen:

Linuxhint

Få teksten der verktøytipen vises ved å bruke "getElementById ()”Metode:

var lh = dokument.getElementById ("tekst");

Nå, ring “AddEventListener ()”Metode ved å passere“mus over”Hendelse og en funksjon () som en parameter. I den definerte funksjonen vil vi først opprette en verktøytips ved å lage en "div”Element, angi teksten som vil bli vist på svevet, og sette litt styling av verktøytipset ved hjelp av“stil" Egenskap. Til slutt, legg til verktøytips ved hjelp av “vedlegg ()”Metode:

LH.AddEventListener ("Mouseover", funksjon ()
var tooltip = dokument.CreateElement ("Div");
Verktøytip.InnerHTML = "Et beste nettsted for å lære ferdigheter";
Verktøytip.stil.synlighet = "synlig";
Verktøytip.stil.posisjon = "absolutt";
Verktøytip.stil.BakgrunnColor = "RGB (107, 101, 101)";
ToolTip.stil.Padding = "5px";
Verktøytip.stil.borderradius = "3px";
Verktøytip.stil.farge = "hvit";
Verktøytip.stil.venstre = "50%";
Verktøytip.stil.bredde = "200px";
dokument.kropp.appendchild (verktøytip);
);

Her, bruk "Mouseout”Hendelse som vil fjerne verktøytips mens markøren vil vekk fra teksten:

LH.AddEventListener ("Mouseout", funksjon ()
dokument.kropp.fjerne (verktøytip);
);

Produksjon

Eksempel 2: ToolTip ved hjelp av JavaScript med CSS

Du kan også opprette et verktøytips i JavaScript med CSS.

For å gjøre det, lag et område for å vise teksten til verktøytipset ved hjelp av taggen og tilordne en ID “#MyTOOLTIP”:

= "Mytooltip">

Få referanser til teksten og verktøytipset ved å bruke “getElementById ()”Metode:

var lh = dokument.getElementById ("tekst");
var tooltip = dokument.getElementById ("Mytooltip");

Ring verktøytips på "mus over”Hendelse ved å sette teksten i funksjonen ved å bruke“indrehtml”Eiendom:

LH.AddEventListener ("Mouseover", funksjon ()
Verktøytip.stil.synlighet = "synlig";
Verktøytip.InnerHTML = "Et beste nettsted for å lære ferdigheter";
);

Skjul verktøytips på "Mouseout”Arrangement ved å sette“synlighet”Eiendom til“skjult”:

LH.AddEventListener ("Mouseout", funksjon ()
Verktøytip.stil.synlighet = "skjult";
);

Opprett en ID “#MyTOOLTIP”I stilarket som vil style verktøytips:

#MyTooltIp
Synlighet: skjult;
Bredde: 200px;
z-indeks: 1;
bakgrunnsfarge: RGB (107, 101, 101);
tekst-align: sentrum;
Farge: Hvit;
polstring: 5px 0;
Border-Radius: 3px;
Venstre: 50%;

Som du kan se at verktøytipset er implementert med hell på teksten:

Hvordan lage verktøytip ved hjelp av HTML og CSS?

Du kan også opprette et verktøytips uten JavaScript. I HTML -filen oppretter teksten “Linuxhint”, Der verktøytipset vil bli vist mens du svever på den. Lag element for å angi teksten for verktøytipen inne i overskriften/teksten

stikkord:

Linuxhint
class = "tooltiptext">
En plattform for å lære ferdigheter

I stilarket, lag en klasse eller en ID som vil bli tilordnet HTML -elementene. Her vil vi lage en klasse “Verktøytip”Som er tilordnet overskriften:

.verktøytip
Posisjon: relativ;
Display: Inline-block;

Definere en klasse “TOOLTIPTEXT”For å style teksten til verktøytipsen og tilordne den HTML”" stikkord:

.TOOLTIPPTEXT
Synlighet: skjult;
Bredde: 150px;
bakgrunnsfarge: RGB (107, 101, 101);
Farge: #FFF;
tekst-align: sentrum;
polstring: 5px 0;
Border-Radius: 3px;
Posisjon: Absolutt;
z-indeks: 1;
Bunn: 125%;
Venstre: 50%;
margin -venstre: -60px;
Opacitet: 0;
Overgang: Opacitet 0.3s;

Sett "sveve”Effekt med“Verktøytip”Klasse for å vise verktøytips på sveveeffekten:

.Verktøytip: Hopp .TOOLTIPPTEXT
synlighet: synlig;
Opacitet: 1;

Produksjon

Vi har samlet alle nødvendige instruksjoner som er relevante for Plain JavaScript Tooltip.

Konklusjon

For å opprette en verktøytips ved hjelp av JavaScript, bruk "mus over”Og“Mouseout”Hendelser, som viser verktøytipset på svevet på elementet og skjuler det når Mouseout -hendelsen utløses. For styling av verktøytipen, bruk "stil”Attributt i JavaScript. I denne artikkelen demonstrerte vi de best mulige eksemplene på å lage et verktøytips ved hjelp av vanlig JavaScript, JavaScript med CSS, og et verktøytips uten JavaScript.