Tento článok demonštruje popis pomocou jednoduchého JavaScriptu.
Ako vytvoriť jednoduchý popis JavaScriptu?
Ak chcete vytvoriť popis pomocou JavaScriptu, použite „ prejdenie myšou “ a „ mouseout ' diania. Pre lepšie pochopenie postupujte podľa nižšie uvedených príkladov.
Príklad 1: Popis pomocou JavaScriptu
V uvedenom príklade vytvoríme popis v čistom JavaScripte a tiež naštylizujeme popis pomocou „ štýl “.
Najprv vytvorte text, v ktorom chceme zobraziť popis pri udalosti myšou:
< h5 id = 'text' > Linux h5 >
Získajte text, v ktorom sa zobrazí popis pomocou „ getElementById() “ metóda:
kde lh = dokument. getElementById ( 'text' ) ;
Teraz zavolajte na „ addEventListener() ” metódou odovzdaním “ prejdenie myšou ” udalosť a funkcia() ako parameter. V definovanej funkcii si najprv vytvoríme tooltip vytvorením „ div “, nastavte text, ktorý sa zobrazí po umiestnení kurzora myši, a nastavte nejaký štýl popisu pomocou „ štýl “. Nakoniec pridajte popis pomocou „ appendChild() “ metóda:
lh. addEventListener ( 'prejdi myšou' , funkcia ( ) {bol popis = dokument. createElement ( 'div' ) ;
popis. innerHTML = „Najlepší web na učenie sa zručností“ ;
popis. štýl . viditeľnosť = 'viditeľný' ;
popis. štýl . pozíciu = 'absolútne' ;
popis. štýl . farba pozadia = 'rgb(107, 101, 101)' ;
popis. štýl . vypchávka = '5px' ;
popis. štýl . borderRadius = '3px' ;
popis. štýl . farba = 'biely' ;
popis. štýl . vľavo = 'päťdesiat percent' ;
popis. štýl . šírka = '200px' ;
dokument. telo . appendChild ( popis ) ;
} ) ;
Tu použite „ mouseout ” udalosť, ktorá odstráni popis, zatiaľ čo kurzor bude preč od textu:
lh. addEventListener ( 'myš von' , funkcia ( ) {
dokument. telo . removeChild ( popis ) ;
} ) ;
Výkon
Príklad 2: Popis pomocou JavaScriptu s CSS
Môžete tiež vytvoriť popis v JavaScripte pomocou CSS.
Ak to chcete urobiť, vytvorte oblasť na zobrazenie textu popisku pomocou značky a priraďte id “ #myTooltip “:
< span id = 'myTooltip' > rozpätie >Získajte odkazy na text a popis pomocou „ getElementById() “ metóda:
kde lh = dokument. getElementById ( 'text' ) ;bol popis = dokument. getElementById ( 'myTooltip' ) ;
Vyvolajte popis na stránke „ prejdenie myšou ” udalosť nastavením textu vo funkcii pomocou tlačidla “ innerHTML ' nehnuteľnosť:
lh. addEventListener ( 'prejdi myšou' , funkcia ( ) {popis. štýl . viditeľnosť = 'viditeľný' ;
popis. innerHTML = „Najlepší web na učenie sa zručností“ ;
} ) ;
Skryť popis na „ mouseout ” udalosť nastavením “ viditeľnosť “vlastnosť na “ skryté “:
lh. addEventListener ( 'myš von' , funkcia ( ) {popis. štýl . viditeľnosť = 'skrytý' ;
} ) ;
Vytvorte si ID “ #myTooltip ” v hárku štýlov, ktorý upraví štýl popisu:
#myTooltip {viditeľnosť : skryté ;
šírka : 200 pixelov ;
s - index : 1 ;
pozadie - farba : rgb ( 107 , 101 , 101 ) ;
text - zarovnať : centrum ;
farba : biely ;
vypchávka : 5 pixelov 0 ;
hranica - polomer : 3px ;
vľavo : päťdesiat %;
}
Ako môžete vidieť, že popis bol úspešne implementovaný do textu:
Ako vytvoriť popis pomocou HTML a CSS?
Popis môžete vytvoriť aj bez JavaScriptu. V súbore HTML vytvorte text „ Linux “, kde sa pri umiestnení kurzora myši zobrazí popis. Vytvorte prvok na nastavenie textu pre popis vnútri značky nadpisu/textu :
Linux
< rozpätie trieda = 'tooltiptext' >
Platforma na učenie sa zručností
rozpätie >
h5 >
V hárku štýlov vytvorte triedu alebo id, ktoré budú priradené k prvkom HTML. Tu vytvoríme triedu „ popis “, ktorý je priradený k nadpisu:
. popis {pozíciu : príbuzný ;
displej : v rade - blokovať ;
}
Definujte triedu' tooltiptext ” na štýl textu popisku a priraďte mu kód HTML “ Značka ”:
. tooltiptext {viditeľnosť : skryté ;
šírka : 150 pixelov ;
pozadie - farba : rgb ( 107 , 101 , 101 ) ;
farba : #fff ;
text - zarovnať : centrum ;
vypchávka : 5 pixelov 0 ;
hranica - polomer : 3px ;
pozíciu : absolútne ;
s - index : 1 ;
dno : 125 %;
vľavo : päťdesiat %;
marža - vľavo : - 60 pixelov ;
nepriehľadnosť : 0 ;
prechod : nepriehľadnosť 0,3s ;
}
Nastaviť “ vznášať sa “efekt s “ popis ” na zobrazenie popisku pre efekt vznášania:
. popis : vznášať sa . tooltiptext {viditeľnosť : viditeľné ;
nepriehľadnosť : 1 ;
}
Výkon
Zostavili sme všetky potrebné pokyny týkajúce sa jednoduchého popisu JavaScriptu.
Záver
Ak chcete vytvoriť popis pomocou JavaScriptu, použite „ prejdenie myšou “ a „ mouseout ” udalosti, ktorá zobrazuje popis pri umiestnení kurzora myši na prvok a skryje ho, keď sa spustí udalosť mouseout. Na úpravu štýlu popisu použite „ štýl ” v JavaScripte. V tomto článku sme demonštrovali najlepšie možné príklady vytvorenia tooltipu pomocou obyčajného JavaScriptu, JavaScriptu s CSS a tooltipu bez JavaScriptu.