JavaScript: Tooltip cz. 1

0:00Przechodzimy do wykonania już trochę bardziej ambitnego projektu, który połączy

0:04całą dotychczasową wiedzę z zakresu samego języka JavaScript, jak i obiektowego

0:08modelu dokumentu, którą zdążyłem Ci już przekazać.

0:11I będzie to tooltip, czyli taki dymek,

0:13który się wyświetla po najechaniu na niektóre elementy.

0:17Teraz na tej stronie mam kilka elementów, którym przypisałem atrybut title.

0:21Zobacz np.

0:22do tego obrazka przypisałem title albo

0:24gdzieś tutaj wewnątrz paragrafu mamy strong z tytułem i mamy np.

0:28również tutaj tytuł.

0:29Generalnie będziemy chcieli stworzyć taki

0:31Tooltip, który będzie przypisany do wszystkich tych elementów, które mają

0:35atrybut title. Ale zobaczmy jak się ten atrybut zachowuje domyślnie w

0:38przeglądarce. Więc po najechaniu na ten obrazek jak chwilę poczekam

0:42zauważ, że przy kusorze pojawia się właśnie taki dymek,

0:45fotografia z pierwszego miejsca, tutaj również on się pojawi czy np.

0:49tutaj. Ale my chcemy stworzyć swój własny dymek, który przy takich elementach będzie

0:53się pojawiał nad nimi tutaj i dokładnie na środku takiego elementu, a także będziemy

0:58chcieli sprawić, żeby nie pojawiał się ten oryginalny title.

1:02I to wszystko pokażę Ci w tej lekcji.

1:05Na początek pokażę Ci jak taki Tooltip

1:07wygląda, bo oczywiście ja musiałem go wcześniej przygotować.

1:09Czyli mam do niego jakiś CSS.

1:11On będzie pozycjonowany absolutnie.

1:13Będziemy go wstawiać do body, no i tutaj są do niego odpowiednie style,

1:17więc nie będziemy się zajmować tym, jak takie style stworzyć,

1:20ale pokażę Ci, że jak utworzymy element

1:21edu-tooltip i wstawimy go sobie na stronę do body bo będziemy go chcieli wstawiać do body, nie

1:26tam gdzie są te elementy, nad którymi ma się pojawiać, ale bezpośrednio w body i

1:30będzie tak pozycjonowany żeby się nad tymi elementami znalazł.

1:34To jak utworzymy takiego div.edu-tooltip

1:37w ten sposób i tutaj mu wstawimy jakąś treść,

1:41zobacz jak to wygląda na stronie.

1:43Dokładnie w ten sposób ten tooltip wygląda

1:45tylko, że on się pojawił na końcu body.

1:47Ale już ma przypisane coś takiego jak position absolute,

1:50więc gdybyśmy teraz zaczęli manipulować

1:53wpisując tutaj jego stylami takimi jak top np.

1:55100 pikseli i left powiedzmy 300 pikseli to zauważ, że on się pojawia tutaj.

2:01No i to jest dokładnie to co będziemy chcieli zrobić, a więc po najechaniu na

2:04jakiś element będziemy chcieli odczytać jego atrybut title, utworzyć dynamicznie

2:08takiego div, wstawić go na stronę i ustawić go na nad tym elementem, na który

2:14najechaliśmy, więc będziemy musieli odczytać gdzie ten element się znajduje.

2:18Po zjechaniu myszką z takiego elementu

2:20będziemy chcieli ten div z body po prostu usunąć.

2:23Więc zabierzmy się za pracę.

2:25Ja to po prostu stąd wyrzucę

2:28i przejdziemy sobie do pliku main.js, w którym napisałem trochę założeń.

2:32Zaczniemy od pierwszego, czyli przypisz zdarzenie mouseenter.

2:35A więc po najechaniu myszą chcemy wywołać

2:37jakąś funkcję do wszystkich przekazanych elementów.

2:40A więc będę chciał stworzyć sobie to trochę dynamicznie, czyli utworzyć funkcję

2:43init, która będzie nam inicjować cały ten kod.

2:47Potem sobie na końcu jeszcze to zawrzemy w takim module.

2:50I co ja bym chciał zrobić? Chciałbym móc do tej funkcji przekazać, do

2:53których elementów ja chcę tego tooltip przypisać.

2:56A więc wszystkie elementy na stronie, które mają atrybut title, chcę żeby były

3:00brane pod uwagę. Więc możemy te elementy wyszukać

3:03i zaraz to zrobimy.

3:04Napiszmy sobie tutaj elems i teraz będę chciał wywołać funkcję init

3:08i te elementy tam przekazać za pomocą document.querySelectorAll

3:13wyszukamy na stronie wszystkich elementów, które mają atrybut title. Czyli

3:18w ten sposób te elementy zostaną znalezione i wstawiam je do funkcji init.

3:22Dzięki temu to jest po prostu bardziej dynamiczne. A więc pod elems

3:26wewnątrz tej funkcji znajdują się wszystkie elementy, które mają atrybut

3:30title i zgodnie z punktem pierwszym chcemy do każdego z nich przypisać

3:34zdarzenie mouseenter i jakąś funkcję, którą za chwilę będziemy tworzyć.

3:38Skoro elems to jest taki obiekt tablicopodobny zwrócony z querySelectorAll, o

3:43tym już w tym kursie dokładnie mówiłem, to możemy na nim wykonać sobie taką pętlę

3:48for, która przypisze nam odpowiednie zdarzenia.

3:51Zanim to jednak zrobimy, to chciałbym utworzyć funkcję, którą potem uzupełnimy.

3:55Nazwiemy ją showTooltip i będziemy chcieli właśnie po najechaniu

3:59na taki element wywołać dokładnie tę funkcję.

4:02Czyli tutaj moglibyśmy skorzystać z tej pętli for np.

4:05for of, a więc do wszystkich elementów za pomocą for, powiedzmy let elem of elems,

4:11też to dokładnie pokazywałem już w tym kursie.

4:13A więc do każdego elementu chcemy

4:15przypisać zdarzenie za pomocą elem.addEventListener,

4:20jeżeli przeskoczyłeś to tej lekcji, a nie

4:22oglądałeś wszystkich po kolei to gwarantuję Ci, że to wszystko wcześniej

4:25już tłumaczyłem i powinieneś w te miejsca się przenieść.

4:28Czyli do danego elementu będę chciał

4:30przypisać zdarzenie, które nazywa się mouseenter,

4:33kiedy ktoś najedzie myszą na ten element, to chcę wywołać funkcję showTooltip.

4:37W ten oto sposób.

4:38A więc wywołaliśmy funkcję init,

4:40przekazaliśmy wszystkie elementy, które mają atrybut title,

4:43do każdego z nich przypisaliśmy po najechaniu myszą wywołanie tej właśnie funkcji.

4:48Ta funkcja oczywiście automatycznie

4:50otrzyma tutaj obiekt Event, który będziemy sobie mogli wywołać.

4:53Możemy na początek po prostu go wyświetlić,

4:55zapiszemy to wszystko

4:57i teraz przejdziemy do konsoli.

5:00OK, tutaj mamy jakiś błąd, tutaj jest literówka.

5:03Zabrakło e. Zobaczmy.

5:06Teraz już nie ma błędu i po najechaniu na

5:08obrazek, który miał atrybut title, ten jego event się tutaj wyświetla,

5:12po najechaniu na ten element również i na ten link również.

5:16A więc część pracy już wykonaliśmy, bo

5:18wszystkie elementy, które mają atrybut title to po najechaniu na nie coś się

5:22dzieje, a więc wywołuje się funkcja showTooltip.

5:25Teraz w punkcie drugim napisałem, że po

5:27najechaniu na taki element chcielibyśmy odczytać jego pozycję na stronie.

5:30To jest coś, co również jest w osobnej lekcji.

5:33W razie czego sobie do niej wróć.

5:34A więc jeżeli pod e

5:37mamy event, to pod e.currentTarget będziemy mogli sobie odczytać odwołanie do

5:42elementu, na który aktualnie najechaliśmy myszą.

5:45A więc e.currentTarget zwróci nam dokładnie odwołanie do takiego elementu.

5:52I na takim elemencie możemy odczytać jego

5:54pozycję za pomocą metody getBoundingClientRect, którą Ci wcześniej pokazywałem.

5:59Zatem będę chciał sobie to zapisać w

6:00takiej stałej, którą nazwałem po prostu pos.

6:03Odwołamy się do currentTarget, czyli do elementu, na który najechaliśmy i do metody

6:07getBoundingClientRect, upewnijmy się, że tutaj jest OK getBounding.

6:14Tutaj powinno być jeszcze e, czyli getBoundingClientRect,

6:17sprawdźmy w konsoli znowu co tam się znalazło.

6:20Po najechaniu na taki element widzimy gdzie on jest usadowiony na stronie. I

6:25dzięki temu będziemy mogli nasz Tooltip również w odpowiednim miejscu wstawić.

6:29Zobaczmy zatem jaki jest kolejny punkt.

6:32Punkt trzeci, stwórz dynamicznie element Tooltip.

6:36No właśnie, więc teraz chcemy utworzyć takiego div z klasą edu-tooltip

6:40jak tutaj

6:40wcześniej go wstawiałem. Żeby sobie nie śmiecić w funkcji showTooltip

6:44utworzymy nową funkcję, którą nazwiemy createTooltip.

6:50Chciałbym, żeby ta funkcja otrzymywała tekst, który ma być wstawiony do tego tooltipa.

6:54Więc będziemy chcieli tutaj ją wywołać, a więc po najechaniu na jakiś

6:58element będziemy chcieli po pierwsze odczytać tekst jaki jest w atrybucie

7:02title, czyli powiedzmy najechaliśmy na obrazek,

7:05chciałbym ten tekst fotografia z pierwszego miejsca odczytać.

7:08Jak to zrobimy? Napiszmy sobie const text

7:12i odwołamy się znowu do e.currentTarget i do getAttribute,

7:17też to pokazywałem już w tym kursie i odczytamy jego atrybut title.

7:21Następnie ten tekst będę chciał przekazać do funkcji createTooltip, a więc po prostu

7:27ją wywołajmy createTooltip i przekażemy jej text.

7:31Co za tym idzie, teraz po najechaniu na dowolny element tak naprawdę wywołuje się

7:35również funkcja createTooltip, która otrzymuje ten text.

7:39Podejrzyjmy to sobie.

7:41Jak widzisz dokładnie tak jest.

7:42Po najechaniu na element,

7:44który ma atrybut title otrzymujemy go tutaj i wyświetlamy na razie w konsoli.

7:49Zajmiemy się zatem utworzeniem tego div, o którym wspomniałem.

7:52Możemy to zrobić w ten sposób, że

7:53napiszemy sobie tutaj Tooltip i za pomocą metody createElement utworzymy element div.

8:00Teraz ten przekazany tekst będziemy

8:02chcieli oczywiście ustawić jako text tego div, więc odwołam się do tooltip

8:06i możemy za pomocą właściwości text content tenże text właśnie tam przypisać.

8:12No i teraz ten tooltip również powinien mieć

8:13klasę ebu-tooltip, a także żeby on był ukryty, ale tym się zajmiemy

8:18za chwilę będzie miał klasę hidden.

8:21Ta klasa będzie potrzebna później, więc na razie dodajmy do niego tylko tę jedną

8:25klasę, a więc napiszemy tooltip i możemy zrobić classList.add,

8:30żeby dodać jakieś klasy albo jeżeli on nie miał żadnych klas, to możemy takim

8:34skrótem className przypisać po prostu wszystkie klasy, jakie są tam potrzebne.

8:38Na razie jest nam potrzebna tylko klasa edu-tooltip.

8:41W ten sposób.

8:43I może zamienię sobie to kolejnością, chociaż to nie ma tutaj znaczenia.

8:46Utworzyłem div, przypisałem mu klasę, przypisałem mu jego tekst, no i teraz tego

8:50div będę chciał po prostu wstawić na stronę.

8:53A więc będę chciał zrobić document.body,

8:55czyli odwołać się do elementu body takim skrótem i następnie append

8:59i dodamy sobie tutaj tooltip. Wszystkie rzeczy, które teraz pokazuję

9:03ja ich nie tłumaczę np.

9:04jak działa append, bo każda z nich była tłumaczona w osobnej lekcji.

9:08OK, zobaczmy co się stanie teraz po

9:10najechaniu na dowolny element, jego tooltip pojawia się w body.

9:14Jak najedziemy na inny to kolejny tooltip się pojawia itd.

9:18Więc będziemy się chcieli zająć jeszcze tym, żeby mieć tylko jeden tooltip. Ale

9:22żeby te lekcje nie były zbyt długie, to zajmiemy się tym w lekcji kolejnej.