Denne artikkelen vil demonstrere verktøytipset ved hjelp av vanlig JavaScript.
Hvordan lage et vanlig JavaScript-verktøytips?
For å lage et verktøytips ved hjelp av JavaScript, bruk ' mus over ' og ' museut ' arrangementer. Følg eksemplene nedenfor for en bedre forståelse.
Eksempel 1: Verktøytips ved hjelp av JavaScript
I det gitte eksemplet vil vi lage et verktøytips i ren JavaScript og også style verktøytipset ved å bruke ' stil ' Egenskap.
Lag først en tekst der vi ønsker å vise et verktøytips om museoverhendelsen:
< h5 id = 'tekst' > Linux h5 >
Få teksten der verktøytipset vises ved å bruke ' getElementById() ' metode:
hvor lh = dokument. getElementById ( 'tekst' ) ;
Ring nå ' addEventListener() '-metoden ved å sende ' mus over ” hendelse og en funksjon() som en parameter. I den definerte funksjonen vil vi først lage et verktøytips ved å lage en ' div '-elementet, angi teksten som skal vises på pekeren, og angi litt stiling av verktøytipset ved å bruke ' stil ' Egenskap. Til slutt legger du til verktøytipset ved å bruke ' appendChild() ' metode:
lh. addEventListener ( 'mus over' , funksjon ( ) {var verktøytips = dokument. oppretteElement ( 'div' ) ;
verktøytips. indreHTML = 'Et beste nettsted for å lære ferdigheter' ;
verktøytips. stil . synlighet = 'synlig' ;
verktøytips. stil . posisjon = 'absolutt' ;
verktøytips. stil . bakgrunnsfarge = 'rgb(107, 101, 101)' ;
verktøytips. stil . polstring = '5px' ;
verktøytips. stil . borderRadius = '3px' ;
verktøytips. stil . farge = 'hvit' ;
verktøytips. stil . venstre = 'femti%' ;
verktøytips. stil . bredde = '200px' ;
dokument. kropp . vedleggChild ( verktøytips ) ;
} ) ;
Her, bruk ' museut ”-hendelse som vil fjerne verktøytipset mens markøren vil vekk fra teksten:
lh. addEventListener ( 'mus ut' , funksjon ( ) {
dokument. kropp . fjerne barnet ( verktøytips ) ;
} ) ;
Produksjon
Eksempel 2: Verktøytips ved hjelp av JavaScript med CSS
Du kan også lage et verktøytips i JavaScript med CSS.
For å gjøre det, opprett et område for å vise teksten til verktøytipset ved å bruke -taggen og tilordne en id ' #mitt verktøytips ':
< span id = 'mitt verktøytips' > span >Få referansene til teksten og verktøytipset ved å bruke ' getElementById() ' metode:
hvor lh = dokument. getElementById ( 'tekst' ) ;var verktøytips = dokument. getElementById ( 'mitt verktøytips' ) ;
Ring verktøytipset på ' mus over '-hendelse ved å sette teksten i funksjonen ved å bruke ' indreHTML ' eiendom:
lh. addEventListener ( 'mus over' , funksjon ( ) {verktøytips. stil . synlighet = 'synlig' ;
verktøytips. indreHTML = 'Et beste nettsted for å lære ferdigheter' ;
} ) ;
Skjul verktøytipset på ' museut '-hendelse ved å sette ' synlighet ' eiendom til ' skjult ':
lh. addEventListener ( 'mus ut' , funksjon ( ) {verktøytips. stil . synlighet = 'skjult' ;
} ) ;
Opprett en id ' #mitt verktøytips ' i stilarket som vil style verktøytipset:
#mitt verktøytips {synlighet : skjult ;
bredde : 200 piksler ;
Med - indeks : 1 ;
bakgrunn - farge : rgb ( 107 , 101 , 101 ) ;
tekst - tilpasse : senter ;
farge : hvit ;
polstring : 5 px 0 ;
grense - radius : 3 px ;
venstre : femti %;
}
Som du kan se at verktøytipset har blitt implementert på teksten:
Hvordan lage verktøytips ved hjelp av HTML og CSS?
Du kan også lage et verktøytips uten JavaScript. I HTML-filen lager du teksten ' Linux ”, hvor verktøytipset vises mens du holder pekeren på det. Opprett -element for å angi teksten for verktøytipset inne i heading/text -taggen:
Linux
< span klasse = 'verktøytipstekst' >
En plattform for å lære ferdigheter
span >
h5 >
I stilarket oppretter du en klasse eller en id som skal tilordnes HTML-elementene. Her vil vi lage en klasse ' verktøytips ' som er tilordnet overskriften:
. verktøytips {posisjon : slektning ;
vise : på linje - blokkere ;
}
Definer en klasse ' verktøytipstekst ' for å style teksten til verktøytipset og tilordne den HTML-en ' ' stikkord:
. verktøytipstekst {synlighet : skjult ;
bredde : 150 piksler ;
bakgrunn - farge : rgb ( 107 , 101 , 101 ) ;
farge : #fff ;
tekst - tilpasse : senter ;
polstring : 5 px 0 ;
grense - radius : 3 px ;
posisjon : absolutt ;
Med - indeks : 1 ;
bunn : 125 %;
venstre : femti %;
margin - venstre : - 60 piksler ;
opasitet : 0 ;
overgang : opasitet 0,3s ;
}
Sett ' sveve ' effekt med ' verktøytips '-klassen for å vise verktøytipset om sveveeffekten:
. verktøytips : sveve . verktøytipstekst {synlighet : synlig ;
opasitet : 1 ;
}
Produksjon
Vi har samlet alle nødvendige instruksjoner som er relevante for det vanlige JavaScript-verktøytipset.
Konklusjon
For å lage et verktøytips ved hjelp av JavaScript, bruk ' mus over ' og ' museut ”-hendelser, som viser verktøytipset ved sveving på elementet og skjuler det når mouseout-hendelsen utløses. For å style verktøytipset, bruk ' stil ”-attributt i JavaScript. I denne artikkelen demonstrerte vi de best mulige eksemplene på å lage et verktøytips med vanlig JavaScript, JavaScript med CSS og et verktøytips uten JavaScript.