JavaScript: Tooltip cz. 2

0:00Kontynuujemy pracę nad Tooltip i poprzednią lekcję skończyliśmy na tym, że

0:03po najechaniu na jakiś element jego tooltip jest wstawiany na stronę.

0:08I teraz będziemy chcieli się zająć tym, żeby ten tooltip wypozycjonować tak, aby

0:12znalazł się nad elementem, na który najechaliśmy.

0:15A zatem przejdźmy do kodu.

0:16I jesteśmy tutaj funkcji createTooltip.

0:19Po pierwsze na początku będę chciał zrobić tak, żeby ten element tooltip był ukryty.

0:24Czyli dodam mu klase hidden, którą zdefiniowałem w CSS,

0:27następnie będziemy chcieli tutaj wypozycjonować ten element na stronie i

0:31dopiero wtedy go pokazać, aby nie było jakiegoś np.

0:34mignięcie, że ten element dodaliśmy itd.

0:37A poza tym tak naprawdę tutaj głównym powodem jest to,

0:40że za pomocą takiego zapisu ten tooltip w zasadzie będzie tak ładnie pokazywany, bo

0:45tutaj mamy przypisane transition do opacity i do visibility. Więc dzięki

0:50temu po prostu ten element będzie płynnie pokazywany.

0:53Czyli przypisuję klasę hidden i dodaję go do body.

0:55No i zobacz co się dzieje. On jest wstawiany do body, ale go nie widać

0:58za pomocą właśnie tej klasy hidden. A więc tutaj go sobie wypozycjonujemy i następnie

1:03będziemy go chcieli dodać do body i usunąć mu klasę hidden.

1:08Czyli możemy powiedzieć, że na tym etapie

1:10tooltip.classList.remove, usuwamy mu klasę hidden,

1:15dzięki temu on zostanie pokazany.

1:16Sprawdźmy, po najechaniu na ten element

1:18jak widać tooltip się pojawia.

1:20Czyli zajmiemy się teraz punktem czwartym.

1:23Wypozycjonuj element tooltip w odpowiednim miejscu i wstaw go na stronę.

1:28I to jest coś, co może się wydawać

1:29skomplikowane, dlatego zróbmy sobie to krok po kroku.

1:32Skąd ta funkcja

1:33createTooltip ma wiedzieć, jaka powinna być pozycja tooltipa?

1:37Otóż chciałbym ją tutaj przekazywać w formie options.

1:42Czyli nazwiemy sobie tutaj parametr options i przy wywołaniu tej funkcji

1:45createTooltip będę chciał tutaj przekazać jakiś obiekt z opcjami.

1:49Skąd my ten obiekt weźmiemy?

1:51Otóż utworzymy sobie go w tym miejscu.

1:54A więc skoro pobraliśmy pozycję elementu,

1:56na który jechaliśmy, a więc na przykład z tego obrazka, wiemy ile on jest odsunięty

2:01od lewej strony, wiemy jaka jest jego szerokość i ile jest odsunięty od góry.

2:06To wszystko mamy zapisane tutaj w pos. Więc będę chciał sobie utworzyć taki

2:10obiekt, który nazwiemy options i w środku będę chciał zapisać trzy właściwości.

2:15Pierwsza to będzie w, ale możesz ją nazwać jak chcesz np.

2:19width i ona będzie właśnie nam reprezentować

2:22szerokość powiedzmy tego obrazka, na który najechaliśmy.

2:25A więc możemy z tej metody getBoundimgClientRect

2:28wyciągnąć to za pomocą po prostu width.

2:32Następnie będę chciał podać pozycję tutaj

2:35lewej krawędzi tego elementu i zapiszę sobie to pod nazwą x.

2:40Będzie to pos.left.

2:42To też pokazywałem już w osobnej lekcji.

2:44I następnie górną pozycję pos i tutaj będziemy mieli top.

2:48A więc to są pozycje elementu, na które najechaliśmy. I właśnie takie opcje będę

2:53chciał przekazać do funkcji createTooltip, aby mogła ona z nich skorzystać.

2:57Zatem przekazujemy tam odczytany tekst, a

2:59także odczytane szerokości i pozycje X i Y.

3:04Tak sobie je nazwaliśmy. Zatem możemy już

3:07nie patrzeć na tą funkcję, ale wrócić do tej funkcji.

3:10Wiemy teraz, że pod options będziemy mieli

3:11właśnie taki obiekt, gdzie będzie w, x i y. I za pomocą tych danych wypozycjonujemy

3:17odpowiednio ten tooltip. Żeby ten tooltip wyświetlić w odpowiednim miejscu

3:21to ja Ci pokazywałem, że trzeba mu

3:22przypisać style po prostu left i top w CSS.

3:26A zatem odwołajmy się do niego

3:28i następnie do style, co też Ci już pokazywałem i do left.

3:32I tutaj za pomocą Template Stringu

3:34przypiszemy odpowiednią wartość w pikselach.

3:37Zastanówmy się na początek co w zasadzie chcemy tutaj zrobić.

3:41A więc mamy taki tooltip i gdzie powinna być jego lewa krawędź?

3:45Tak naprawdę jeżeli byśmy najechali na ten

3:47obrazek to chciałbym odczytać, w którym miejscu jest środek tego obrazka.

3:50A więc mając szerokość tego obrazka

3:52pod options w, tutaj sobie to możemy zinterpolować, w, w ten sposób.

3:58To jest cała szerokość

3:59czyli w tym przypadku jak byśmy sobie sprawdzili ten obrazek on ma szerokość

4:04960. Więc jeżeli byśmy tylko tak to przypisali dodali tutaj piksele, zobacz,

4:10to po najechaniu na ten obrazek ten tooltip pojawia się w tym miejscu.

4:14Natomiast chcemy go wyświetlać na środku

4:15tego obrazka, a więc szerokość tego obrazka możemy podzielić przez 2.

4:19Teraz już powinno być znacznie lepiej.

4:22Zgadza się.

4:23Jeszcze nie do końca to wszystko, bo my

4:25pozycjonujemy ten Tooltip względem body, czyli całkowicie tej lewej krawędzi,

4:30a szerokość obrazka bierzemy odtąd dotąd i dzielimy na pół.

4:34Czyli wychodzi nam, że to jest jakby w tym miejscu,

4:37ale ten obrazek, jak widzisz, ma tutaj

4:39jeszcze taką przestrzeń, więc musimy ją wziąć pod uwagę.

4:42I mamy ją zapisaną już w x, czyli pobraliśmy sobie ją jako position left.

4:46To jest właśnie odległość tej krawędzi od krawędzi okna.

4:51I dzięki temu będziemy również mogli sobie to odjąć.

4:54Przejdźmy zatem tutaj.

4:55I w zasadzie nawet nie będziemy tego odejmować, tylko dodawać do tej szerokości

5:00czyli napiszmy options x

5:02a więc ta odległość od lewej krawędzi

5:06i do tego dodamy właśnie to.

5:08To się wykona najpierw, a później to.

5:10Więc co tutaj się tak naprawdę stanie?

5:12Po pierwsze zobaczmy, bo tak jest łatwiej sprawdzić.

5:14Jest już lepiej.

5:16Można powiedzieć, że lewa krawędź tego

5:17tooltipa jest teraz dokładnie na środku tego obrazka.

5:20Dlaczego tak się stało?

5:22Wzięliśmy sobie szerokość tego obrazka, czyli 960 pikseli,

5:25podzieliliśmy to na pół,

5:28wyszło nam z tego 480 pikseli i do tego dodaliśmy sobie jeszcze tę odległość.

5:33Nie wiem, ile tutaj jest dokładnie musielibyśmy zmierzyć.

5:37Powiedzmy, że jest tutaj 60 pikseli ok.

5:40I właśnie na taką wartość ustawiliśmy left.

5:43Tych tooltipów nam się tutaj trochę

5:45natworzyło, ale zobacz, że wyszła nam dokładnie taka oto wartość.

5:49Odświeżę stronę, najadę jeszcze raz żeby ten tooltip był 1.

5:53Czyli widzimy, że on teraz dokładnie jest na środku tego obrazka.

5:56Podobnie będzie jak sobie najadę na inny

5:58element, zauważ, że tooltip pojawi się na środku tego elementu

6:01i podobnie tutaj u góry. Najeżdżam na ten

6:03element i ten tooltip jest na środku tego elementu.

6:06Natomiast teraz jeszcze będziemy musieli

6:08zrobić dwie rzeczy. Czyli ten tooltip wyświetlić na odpowiedniej wysokości,

6:12czyli przypisać mu top, a także przesunąć go o połowę jego szerokości w lewo.

6:18Wtedy będzie dokładnie na środku.

6:19Więc najpierw zajmiemy się tym topem.

6:22A zatem przypiszemy tooltip.style.top

6:25i tutaj również sobie zrobimy taki Template String, też będzie to wartość w

6:29pikselach, a resztę sobie zinterpolujemy w tym miejscu.

6:32A zatem będziemy chcieli się odwołać do tej wartości y, czyli powiedzmy po

6:36najechaniu na obrazek mamy odczytane ile on się od góry znajduje.

6:40I na początek właśnie to przypiszmy, czyli options y.

6:43I zobaczmy co się stanie, najeżdżam sobie tutaj i jak widać górna krawędź naszego tooltip,

6:49zobacz, tutaj wyszło nam to top 193,

6:52została ustawiona tak jak górna krawędź obrazka. Więc teraz chciałbym ten tooltip

6:56wyjąć tutaj jeszcze do góry o tyle jaka jest jego wysokość.

7:00Jak możemy pobrać wysokość tego tooltip?

7:03Otóż możemy to zrobić za pomocą np.

7:05offset height, co też Ci już w tym kursie pokazywałem.

7:08Czyli do tego co już tutaj przypisaliśmy,

7:12a w zasadzie od tego chcemy odjąć tooltip.offsetHeight,

7:17zobaczmy, teraz po najechaniu tutaj

7:22coś chyba nam nie zadziałało.

7:24Zgadza się, tutaj mamy jeden kardynalny błąd.

7:27Mianowicie chcemy odczytać wysokość tego tooltipa, ale on nie został jeszcze

7:31wstawiony na stronę, więc nie wiadomo jaka jest jego wysokość.

7:34A zatem musimy najpierw go wstawić na stronę i dzięki klasie hidden on jest

7:38ukryty, ale ma już wymiary na stronie i możemy je odczytać.

7:43I teraz to powinno działać, więc to jest tutaj kluczowe.

7:46Po najechaniu jak widzisz ten tooltip teraz został przesunięty do góry właśnie o tę

7:50jego wysokość, ale nie została ona w stu procentach dobrze odczytana, dlatego, że

7:54mamy w nim jeszcze taki mały element pozycjonowany

7:57absolutnie. To jest ten trójkącik, więc w zasadzie

8:00tutaj możemy sobie jeszcze od tego odjąć wartość np.

8:0310. To już w ten sposób ręczny wpisać.

8:06I teraz jak widzisz będzie idealnie.

8:08Więc po najechaniu na dany element tooltip

8:10pojawia się idealnie nad nim, ale jeszcze nie pojawia się idealnie na środku, bo

8:15pojawia się na środku tego elementu, czyli tutaj,

8:18ale teraz chcemy go w lewo przesunąć o właśnie połowę szerokości tego tooltipa.

8:24To skoro wysokość tooltipa odczytaliśmy

8:25za pomocą offsetHeight, to jego szerokość odczytamy za pomocą offsetWidth i tutaj

8:30będziemy chcieli również ją odjąć. A zatem w dowolnym miejscu np.

8:34tutaj napiszemy minus tooltip.offsetWidth ale dzielone na dwa.

8:43Tutaj kolejność działań będzie automatycznie przez JavaSctipt dobrze zrobiona.

8:46Nie trzeba żadnych nawiasów, czyli

8:47najpierw będzie dzielenie, potem odejmowanie.

8:50Zobaczmy.

8:51I teraz po najechaniu na taki element jak widzisz jest on

8:56ten tooltip dokładnie na środku wyświetlany. Również tutaj

8:59tak to będzie wyglądać i również tutaj.

9:02A więc nasz tooltip już prawie działa, ale

9:04chcielibyśmy jeszcze po zjechaniu z tego elementu ukrywać taki tooltip i np.

9:08pozbyć się tego domyślnego dymka, który

9:10się pojawia, a także wszystko zawrzeć w fajnym module

9:14dlatego podzielimy sobie to jeszcze na trzecią lekcję, w której to wszystko Ci pokażę.