W tym artykule zademonstrujemy etykietkę narzędzia przy użyciu zwykłego JavaScript.
Jak utworzyć prostą etykietkę JavaScript?
Aby utworzyć podpowiedź za pomocą JavaScript, użyj „ najechanie myszką ' I ' mysz ” wydarzenia. Postępuj zgodnie z poniższymi przykładami dla lepszego zrozumienia.
Przykład 1: Podpowiedź przy użyciu JavaScript
W podanym przykładzie utworzymy podpowiedź w czystym JavaScript, a także stylizujemy podpowiedź za pomocą „ styl ' atrybut.
Najpierw utwórz tekst, w którym chcemy wyświetlić podpowiedź dotyczącą zdarzenia najechania myszką:
< identyfikator h5 = 'tekst' > Linuks h5 >
Pobierz tekst, w którym pojawi się podpowiedź, używając „ getElementById() ' metoda:
gdzie lh = dokument. getElementById ( 'tekst' ) ;
Teraz zadzwoń do „ addEventListener() ” poprzez przekazanie „ najechanie myszką ” zdarzenie i funkcję() jako parametr. W zdefiniowanej funkcji najpierw utworzymy podpowiedź, tworząc „ dz ”, ustaw tekst, który będzie wyświetlany po najechaniu kursorem, i ustaw styl podpowiedzi za pomocą „ styl ' atrybut. Na koniec dodaj podpowiedź, używając „ dołączDziecko() ' metoda:
lh. addEventListener ( „najedź myszką” , funkcja ( ) {była podpowiedź = dokument. utwórz Element ( 'dział' ) ;
podpowiedź. wewnętrzny HTML = „Najlepsza strona internetowa do nauki umiejętności” ;
podpowiedź. styl . widoczność = 'widoczny' ;
podpowiedź. styl . pozycja = 'absolutny' ;
podpowiedź. styl . kolor tła = 'rgb(107, 101, 101)' ;
podpowiedź. styl . wyściółka = „5 pikseli” ;
podpowiedź. styl . promień granicy = „3px” ;
podpowiedź. styl . kolor = 'biały' ;
podpowiedź. styl . lewy = 'pięćdziesiąt%' ;
podpowiedź. styl . szerokość = „200 pikseli” ;
dokument. ciało . dołączDziecko ( podpowiedź ) ;
} ) ;
Tutaj skorzystaj z opcji „ mysz ” zdarzenie, które usunie podpowiedź, gdy kursor odsunie się od tekstu:
lh. addEventListener ( 'wyśledzić' , funkcja ( ) {
dokument. ciało . usuńDziecko ( podpowiedź ) ;
} ) ;
Wyjście
Przykład 2: Podpowiedź przy użyciu JavaScript z CSS
Możesz także utworzyć podpowiedź w JavaScript za pomocą CSS.
Aby to zrobić, utwórz obszar do wyświetlania tekstu podpowiedzi za pomocą znacznika i przypisz identyfikator „ #myTooltip ”:
< identyfikator rozpiętości = „moja podpowiedź” > Zakres >Uzyskaj odniesienia do tekstu i podpowiedzi, korzystając z opcji „ getElementById() ' metoda:
gdzie lh = dokument. getElementById ( 'tekst' ) ;była podpowiedź = dokument. getElementById ( „moja podpowiedź” ) ;
Wywołaj podpowiedź na „ najechanie myszką ” przez ustawienie tekstu w funkcji za pomocą opcji „ wewnętrzny HTML ' nieruchomość:
lh. addEventListener ( „najedź myszką” , funkcja ( ) {podpowiedź. styl . widoczność = 'widoczny' ;
podpowiedź. wewnętrzny HTML = „Najlepsza strona internetowa do nauki umiejętności” ;
} ) ;
Ukryj podpowiedź na „ mysz ” przez ustawienie opcji „ widoczność ”właściwość do” ukryty ”:
lh. addEventListener ( 'wyśledzić' , funkcja ( ) {podpowiedź. styl . widoczność = 'ukryty' ;
} ) ;
Utwórz identyfikator „ #myTooltip ” w arkuszu stylów, który nada styl podpowiedzi:
#myTooltip {widoczność : ukryty ;
szerokość : 200 pikseli ;
z - indeks : 1 ;
tło - kolor : rgb ( 107 , 101 , 101 ) ;
tekst - wyrównywać : Centrum ;
kolor : biały ;
wyściółka : 5 piks 0 ;
granica - promień : 3 piks ;
lewy : pięćdziesiąt %;
}
Jak widać, podpowiedź została pomyślnie zaimplementowana w tekście:
Jak utworzyć podpowiedź za pomocą HTML i CSS?
Możesz także utworzyć podpowiedź bez JavaScript. W pliku HTML utwórz tekst „ Linuks ”, gdzie podpowiedź zostanie wyświetlona po najechaniu na nią kursorem. Utwórz element , aby ustawić tekst podpowiedzi w tagu nagłówka/tekstu :
Linuks
< Zakres klasa = „tekst podpowiedzi” >
Platforma do nauki umiejętności
Zakres >
h5 >
W arkuszu stylów utwórz klasę lub identyfikator, który zostanie przypisany do elementów HTML. Tutaj utworzymy klasę „ podpowiedź ”, który jest przypisany do nagłówka:
. podpowiedź {pozycja : względny ;
wyświetlacz : w linii - blok ;
}
Zdefiniuj klasę „ tekst podpowiedzi ”, aby stylizować tekst podpowiedzi i przypisać mu kod HTML „
widoczność : ukryty ;
szerokość : 150 pikseli ;
tło - kolor : rgb ( 107 , 101 , 101 ) ;
kolor : #ffff ;
tekst - wyrównywać : Centrum ;
wyściółka : 5 piks 0 ;
granica - promień : 3 piks ;
pozycja : absolutny ;
z - indeks : 1 ;
spód : 125 %;
lewy : pięćdziesiąt %;
margines - lewy : - 60 pikseli ;
nieprzezroczystość : 0 ;
przemiana : krycie 0,3 s ;
}
Ustawić ' unosić się ” efekt z „ podpowiedź ”, aby wyświetlić podpowiedź dotyczącą efektu najechania kursorem:
. podpowiedź : unosić się . tekst podpowiedzi {widoczność : widoczny ;
nieprzezroczystość : 1 ;
}
Wyjście
Zebraliśmy wszystkie niezbędne instrukcje dotyczące prostej podpowiedzi JavaScript.
Wniosek
Aby utworzyć podpowiedź za pomocą JavaScript, użyj „ najechanie myszką ' I ' mysz ”, które wyświetlają podpowiedź po najechaniu kursorem na element i ukrywają ją po uruchomieniu zdarzenia mouseout. Aby stylizować etykietę narzędzia, użyj opcji „ styl ” atrybut w JavaScript. W tym artykule zademonstrowaliśmy najlepsze możliwe przykłady tworzenia podpowiedzi przy użyciu zwykłego JavaScript, JavaScript z CSS i podpowiedzi bez JavaScript.