Tento článek předvede popis pomocí jednoduchého JavaScriptu.
Jak vytvořit jednoduchý popis JavaScriptu?
Chcete-li vytvořit popis pomocí JavaScriptu, použijte „ přejet myší ' a ' mouseout ' Události. Pro lepší pochopení postupujte podle níže uvedených příkladů.
Příklad 1: Popisek pomocí JavaScriptu
V uvedeném příkladu vytvoříme tooltip v čistém JavaScriptu a také stylizujeme tooltip pomocí „ styl ' atribut.
Nejprve vytvořte text, kde chceme zobrazit nápovědu k události mouseover:
< h5 id = 'text' > Linux h5 >
Získejte text, kde se popisek zobrazí, pomocí „ getElementById() “ metoda:
kde lh = dokument. getElementById ( 'text' ) ;
Nyní zavolejte „ addEventListener() “ metodou předáním “ přejet myší ” událost a funkci() jako parametr. V definované funkci nejprve vytvoříme nápovědu vytvořením „ div “, nastavte text, který se zobrazí při umístění kurzoru myši, a nastavte nějaký styl popisku pomocí „ styl ' atribut. Nakonec přidejte nápovědu pomocí „ appendChild() “ metoda:
lh. addEventListener ( 'přejet myší' , funkce ( ) {byl tooltip = dokument. createElement ( 'div' ) ;
popis. vnitřní HTML = 'Nejlepší webová stránka pro učení dovedností' ;
popis. styl . viditelnost = 'viditelný' ;
popis. styl . pozice = 'absolutní' ;
popis. styl . barva pozadí = 'rgb(107, 101, 101)' ;
popis. styl . vycpávka = '5px' ;
popis. styl . okrajRadius = '3px' ;
popis. styl . barva = 'bílý' ;
popis. styl . vlevo, odjet = 'padesáti%' ;
popis. styl . šířka = '200px' ;
dokument. tělo . appendChild ( popis ) ;
} ) ;
Zde použijte „ mouseout ” událost, která odstraní popisek, zatímco kurzor bude pryč od textu:
lh. addEventListener ( 'mouseout' , funkce ( ) {
dokument. tělo . odebratChild ( popis ) ;
} ) ;
Výstup
Příklad 2: Popis použití JavaScriptu s CSS
Pomocí CSS můžete také vytvořit nápovědu v JavaScriptu.
Chcete-li tak učinit, vytvořte oblast pro zobrazení textu popisku pomocí značky a přiřaďte id “ #myTooltip “:
< id span = 'myTooltip' > rozpětí >Získejte odkazy na text a nápovědu pomocí „ getElementById() “ metoda:
kde lh = dokument. getElementById ( 'text' ) ;byl tooltip = dokument. getElementById ( 'myTooltip' ) ;
Vyvolejte popis na „ přejet myší ” událost nastavením textu ve funkci pomocí tlačítka “ vnitřní HTML ' vlastnictví:
lh. addEventListener ( 'přejet myší' , funkce ( ) {popis. styl . viditelnost = 'viditelný' ;
popis. vnitřní HTML = 'Nejlepší webová stránka pro učení dovedností' ;
} ) ;
Skryjte popisek na „ mouseout “ událost nastavením “ viditelnost „vlastnost na“ skrytý “:
lh. addEventListener ( 'mouseout' , funkce ( ) {popis. styl . viditelnost = 'skrytý' ;
} ) ;
Vytvořit id ' #myTooltip ” v šabloně stylů, která bude popisovat styl:
#myTooltip {viditelnost : skrytý ;
šířka : 200 pixelů ;
S - index : 1 ;
Pozadí - barva : rgb ( 107 , 101 , 101 ) ;
text - zarovnat : centrum ;
barva : bílý ;
vycpávka : 5px 0 ;
okraj - poloměr : 3px ;
vlevo, odjet : padesáti %;
}
Jak můžete vidět, že popis byl úspěšně implementován do textu:
Jak vytvořit popis pomocí HTML a CSS?
Nápovědu můžete vytvořit i bez JavaScriptu. V souboru HTML vytvořte text „ Linux “, kde se při najetí na něj zobrazí popis. Vytvořte prvek pro nastavení textu pro popis uvnitř značky nadpisu/textu :
Linux
< rozpětí třída = 'tooltiptext' >
Platforma pro učení dovedností
rozpětí >
h5 >
V šabloně stylů vytvořte třídu nebo id, které budou přiřazeny k prvkům HTML. Zde vytvoříme třídu „ popis “, která je přiřazena k nadpisu:
. popis {pozice : relativní ;
Zobrazit : v souladu - blok ;
}
Definujte třídu' text nápovědy ” pro stylování textu popisku a přiřaďte mu HTML “ značka ”:
. text nápovědy {viditelnost : skrytý ;
šířka : 150 pixelů ;
Pozadí - barva : rgb ( 107 , 101 , 101 ) ;
barva : #fff ;
text - zarovnat : centrum ;
vycpávka : 5px 0 ;
okraj - poloměr : 3px ;
pozice : absolutní ;
S - index : 1 ;
dno : 125 %;
vlevo, odjet : padesáti %;
okraj - vlevo, odjet : - 60 pixelů ;
neprůhlednost : 0 ;
přechod : neprůhlednost 0,3s ;
}
Nastavit ' vznášet se “efekt s “ popis ” pro zobrazení popisku k efektu najetí myší:
. popis : vznášet se . text nápovědy {viditelnost : viditelné ;
neprůhlednost : 1 ;
}
Výstup
Sestavili jsme všechny potřebné pokyny týkající se jednoduchého popisku JavaScriptu.
Závěr
Chcete-li vytvořit popis pomocí JavaScriptu, použijte „ přejet myší ' a ' mouseout ” události, které zobrazí nápovědu při najetí myší na prvek a skryjí jej, když je spuštěna událost mouseout. Pro úpravu stylu popisku použijte „ styl ” v JavaScriptu. V tomto článku jsme demonstrovali nejlepší možné příklady vytvoření tooltipu pomocí prostého JavaScriptu, JavaScriptu s CSS a tooltipu bez JavaScriptu.