Denne artikel vil demonstrere værktøjstip ved hjælp af almindelig JavaScript.
Hvordan opretter man et almindeligt JavaScript-værktøjstip?
For at oprette et værktøjstip ved hjælp af JavaScript skal du bruge ' mus over ' og ' museud ' begivenheder. Følg nedenstående eksempler for en bedre forståelse.
Eksempel 1: Værktøjstip ved hjælp af JavaScript
I det givne eksempel vil vi oprette et værktøjstip i ren JavaScript og også style værktøjstippet ved hjælp af ' stil ' attribut.
Først skal du oprette en tekst, hvor vi vil vise et værktøjstip om mouseover-begivenheden:
< h5 id = 'tekst' > Linux h5 >
Hent teksten, hvor værktøjstippet vises ved at bruge ' getElementById() ” metode:
hvor lh = dokument. getElementById ( 'tekst' ) ;
Ring nu til ' addEventListener() ' metode ved at videregive ' mus over ” hændelse og en funktion() som en parameter. I den definerede funktion vil vi først oprette et værktøjstip ved at oprette et ' div '-elementet, indstil teksten, der vil blive vist på svævemarkøren, og indstil en form for værktøjstippet ved hjælp af ' stil ' attribut. Tilføj endelig værktøjstippet ved at bruge ' appendChild() ” metode:
lh. addEventListener ( 'mus over' , funktion ( ) {var tooltip = dokument. skabeElement ( 'div' ) ;
værktøjstip. indreHTML = 'En bedste hjemmeside til at lære færdigheder' ;
værktøjstip. stil . sigtbarhed = 'synlig' ;
værktøjstip. stil . position = 'absolut' ;
værktøjstip. stil . baggrundsfarve = 'rgb(107, 101, 101)' ;
værktøjstip. stil . polstring = '5px' ;
værktøjstip. stil . grænseRadius = '3px' ;
værktøjstip. stil . farve = 'hvid' ;
værktøjstip. stil . venstre = 'halvtreds%' ;
værktøjstip. stil . bredde = '200px' ;
dokument. legeme . vedhæfteBarn ( værktøjstip ) ;
} ) ;
Her skal du bruge ' museud ” hændelse, der fjerner værktøjstip, mens markøren vil væk fra teksten:
lh. addEventListener ( 'musen ud' , funktion ( ) {
dokument. legeme . fjerneBarn ( værktøjstip ) ;
} ) ;
Produktion
Eksempel 2: Værktøjstip Brug af JavaScript med CSS
Du kan også oprette et værktøjstip i JavaScript med CSS.
For at gøre det skal du oprette et område for at vise teksten i værktøjstip ved hjælp af -tagget og tildele et id ' #mit værktøjstip ”:
< span id = 'mit værktøjstip' > span >Få referencerne til teksten og værktøjstippet ved hjælp af ' getElementById() ” metode:
hvor lh = dokument. getElementById ( 'tekst' ) ;var tooltip = dokument. getElementById ( 'mit værktøjstip' ) ;
Ring til værktøjstippet på ' mus over ” hændelse ved at indstille teksten i funktionen ved hjælp af “ indreHTML ” ejendom:
lh. addEventListener ( 'mus over' , funktion ( ) {værktøjstip. stil . sigtbarhed = 'synlig' ;
værktøjstip. indreHTML = 'En bedste hjemmeside til at lære færdigheder' ;
} ) ;
Skjul værktøjstippet på ' museud ' begivenhed ved at indstille ' sigtbarhed ' ejendom til ' skjult ”:
lh. addEventListener ( 'musen ud' , funktion ( ) {værktøjstip. stil . sigtbarhed = 'skjult' ;
} ) ;
Opret et id ' #mit værktøjstip ” i typografiarket, der vil style værktøjstippet:
#mit værktøjstip {sigtbarhed : skjult ;
bredde : 200 px ;
Med - indeks : 1 ;
baggrund - farve : rgb ( 107 , 101 , 101 ) ;
tekst - justere : centrum ;
farve : hvid ;
polstring : 5 px 0 ;
grænse - radius : 3 px ;
venstre : halvtreds %;
}
Som du kan se, at værktøjstip er blevet implementeret på teksten:
Hvordan opretter man værktøjstip ved hjælp af HTML og CSS?
Du kan også oprette et værktøjstip uden JavaScript. I HTML-filen skal du oprette teksten ' Linux ”, hvor værktøjstip vil blive vist, mens du svæver på det. Opret -element for at indstille teksten til værktøjstip inde i overskrift/tekst -tagget:
Linux
< span klasse = 'værktøjstiptekst' >
En platform til at lære færdigheder
span >
h5 >
I typografiarket skal du oprette en klasse eller et id, der vil blive tildelt HTML-elementerne. Her vil vi oprette en klasse ' værktøjstip ”, der er tildelt overskriften:
. værktøjstip {position : i forhold ;
Skærm : inline - blok ;
}
Definer en klasse ' værktøjstiptekst ' for at style teksten i værktøjstippet og tildele den HTML ' ' tag:
. værktøjstiptekst {sigtbarhed : skjult ;
bredde : 150 px ;
baggrund - farve : rgb ( 107 , 101 , 101 ) ;
farve : #fff ;
tekst - justere : centrum ;
polstring : 5 px 0 ;
grænse - radius : 3 px ;
position : absolut ;
Med - indeks : 1 ;
bund : 125 %;
venstre : halvtreds %;
margen - venstre : - 60 px ;
Gennemsigtighed : 0 ;
overgang : opacitet 0,3s ;
}
Indstil ' svæve ' effekt med ' værktøjstip ” klasse for at vise værktøjstip om svæveeffekten:
. værktøjstip : svæve. værktøjstiptekst {sigtbarhed : synlig ;
Gennemsigtighed : 1 ;
}
Produktion
Vi har samlet alle de nødvendige instruktioner, der er relevante for det almindelige JavaScript-værktøjstip.
Konklusion
For at oprette et værktøjstip ved hjælp af JavaScript skal du bruge ' mus over ' og ' museud ” hændelser, som viser værktøjstippet ved at svæve på elementet og skjuler det, når mouseout-hændelsen udløses. Til styling af værktøjstip skal du bruge ' stil ”-attribut i JavaScript. I denne artikel demonstrerede vi de bedst mulige eksempler på at oprette et værktøjstip ved hjælp af almindelig JavaScript, JavaScript med CSS og et værktøjstip uden JavaScript.