Ovaj će članak pokazati opis alata pomoću običnog JavaScripta.
Kako stvoriti običan JavaScript Tooltip?
Da biste izradili opis pomoću JavaScripta, upotrijebite ' prelazak mišem ' i ' mouseout ” događaji. Slijedite dolje navedene primjere za bolje razumijevanje.
Primjer 1: Opis pomoću JavaScripta
U navedenom primjeru izradit ćemo opis alata u čistom JavaScriptu i također stilizirati opis alata koristeći ' stil ” atribut.
Prvo, stvorite tekst u kojem želimo prikazati alatni opis na događaj prelaska mišem:
< h5 id = 'tekst' > Linux h5 >
Dohvatite tekst gdje će se pojaviti opis pomoću ' getElementById() ” metoda:
gdje je lh = dokument. getElementById ( 'tekst' ) ;
Sada nazovite ' addEventListener() ' prosljeđivanjem ' prelazak mišem ” događaj i funkciju() kao parametar. U definiranoj funkciji, prvo ćemo stvoriti opis alata stvaranjem ' div ', postavite tekst koji će biti prikazan dok lebdite i postavite neki stil opisa alata pomoću ' stil ” atribut. Na kraju dodajte opis pomoću ' dodatiDijete() ” metoda:
lh. addEventListener ( 'miš preko' , funkcija ( ) {bio je opis alata = dokument. createElement ( 'div' ) ;
opis alata. unutarnjiHTML = 'Najbolja web stranica za učenje vještina' ;
opis alata. stil . vidljivost = 'vidljiv' ;
opis alata. stil . položaj = 'apsolutno' ;
opis alata. stil . boja pozadine = 'rgb(107, 101, 101)' ;
opis alata. stil . podstava = '5px' ;
opis alata. stil . radijus granice = '3px' ;
opis alata. stil . boja = 'bijelo' ;
opis alata. stil . lijevo = 'pedeset%' ;
opis alata. stil . širina = '200 px' ;
dokument. tijelo . dodatiDijete ( opis alata ) ;
} ) ;
Ovdje upotrijebite ' mouseout ” događaj koji će ukloniti opis alata dok će kursor biti udaljen od teksta:
lh. addEventListener ( 'miš van' , funkcija ( ) {
dokument. tijelo . uklonitiDijete ( opis alata ) ;
} ) ;
Izlaz
Primjer 2: Tooltip korištenje JavaScripta sa CSS-om
Također možete stvoriti opis alata u JavaScriptu s CSS-om.
Da biste to učinili, stvorite područje za prikaz teksta opisa pomoću oznake i dodijelite ID “ #myTooltip ”:
< span id = 'myTooltip' > raspon >Dobijte reference teksta i opis alata koristeći ' getElementById() ” metoda:
gdje je lh = dokument. getElementById ( 'tekst' ) ;bio je opis alata = dokument. getElementById ( 'myTooltip' ) ;
Pozovite opis alata na ' prelazak mišem ” postavljanjem teksta u funkciji pomoću “ unutarnjiHTML ” svojstvo:
lh. addEventListener ( 'miš preko' , funkcija ( ) {opis alata. stil . vidljivost = 'vidljiv' ;
opis alata. unutarnjiHTML = 'Najbolja web stranica za učenje vještina' ;
} ) ;
Sakrij opis alata na ' mouseout ' događaj postavljanjem ' vidljivost ' svojstvo za ' skriven ”:
lh. addEventListener ( 'miš van' , funkcija ( ) {opis alata. stil . vidljivost = 'skriven' ;
} ) ;
Izradite ID ' #myTooltip ” u listu stilova koji će stilizirati opis alata:
#myTooltip {vidljivost : skriven ;
širina : 200 px ;
S - indeks : 1 ;
pozadina - boja : rgb ( 107 , 101 , 101 ) ;
tekst - uskladiti : centar ;
boja : bijela ;
podstava : 5 px 0 ;
granica - radius : 3 px ;
lijevo : pedeset %;
}
Kao što vidite da je opis alata uspješno implementiran na tekst:
Kako stvoriti opis pomoću HTML-a i CSS-a?
Također možete stvoriti opis alata bez JavaScripta. U HTML datoteci stvorite tekst ' Linux ”, gdje će se prikazati opis alata dok lebdite na njemu. Napravite element za postavljanje teksta za tooltip unutar naslova/teksta oznake:
Linux
< raspon razreda = 'tooltiptext' >
Platforma za učenje vještina
raspon >
h5 >
U listu stilova stvorite klasu ili ID koji će biti dodijeljen HTML elementima. Ovdje ćemo stvoriti klasu ' opis alata ” koji je dodijeljen naslovu:
. opis alata {položaj : relativna ;
prikaz : u redu - blok ;
}
Definirajte klasu ' tekst opisa alata ' da biste stilizirali tekst opisa alata i dodijelili mu HTML ' ” oznaka:
. tekst opisa alata {vidljivost : skriven ;
širina : 150 px ;
pozadina - boja : rgb ( 107 , 101 , 101 ) ;
boja : #F F F ;
tekst - uskladiti : centar ;
podstava : 5 px 0 ;
granica - radius : 3 px ;
položaj : apsolutni ;
S - indeks : 1 ;
dno : 125 %;
lijevo : pedeset %;
margina - lijevo : - 60 px ;
neprozirnost : 0 ;
tranzicija : neprozirnost 0.3s ;
}
Postavi ' lebdjeti ' efekt s ' opis alata ” za prikaz alatnog opisa efekta lebdenja:
. opis alata : lebdjeti . tekst opisa alata {vidljivost : vidljivo ;
neprozirnost : 1 ;
}
Izlaz
Sakupili smo sve potrebne upute relevantne za obični JavaScript tooltip.
Zaključak
Da biste izradili opis pomoću JavaScripta, upotrijebite ' prelazak mišem ' i ' mouseout ”, koji prikazuje opis alata pri lebdenju pokazivačem na elementu i skriva ga kada se aktivira događaj ispadanja miša. Za stiliziranje opisa alata koristite ' stil ” atribut u JavaScriptu. U ovom smo članku pokazali najbolje moguće primjere stvaranja opisa alata pomoću običnog JavaScripta, JavaScripta s CSS-om i opisa alata bez JavaScripta.