1
00:00:00,090 --> 00:00:04,890
Welcome back and congratulations to make it to the end of the section where we showed you how to build

2
00:00:04,890 --> 00:00:10,290
out a simple JavaScript tooltip was started out by setting up some styling for the tooltip.

3
00:00:10,530 --> 00:00:15,540
And this one has to be positioned absolute because that element is going to be moving around and we're

4
00:00:15,540 --> 00:00:17,340
going to be moving around using JavaScript.

5
00:00:17,490 --> 00:00:19,560
And we've got some simple styling for the tooltip.

6
00:00:19,710 --> 00:00:24,450
And of course, you can make it look way better and apply your own styling to that.

7
00:00:24,840 --> 00:00:30,210
We need next we needed some HTML and we've got all of the content for the tool tips contained within

8
00:00:30,210 --> 00:00:30,990
the HTML.

9
00:00:31,170 --> 00:00:37,350
So we've got a class of tooltip and data content with the contents of the tooltip contained within the

10
00:00:37,350 --> 00:00:38,100
HTML.

11
00:00:38,250 --> 00:00:45,480
And then we use JavaScript in order to select those elements and apply that interaction to those elements.

12
00:00:45,750 --> 00:00:52,010
We also have an element with the class of output and this is actually going to be the visual tooltip

13
00:00:52,020 --> 00:00:54,010
that shows up to the user.

14
00:00:54,450 --> 00:01:01,350
Next, we use JavaScript in order to select the elements from our HTML into object format that we could

15
00:01:01,350 --> 00:01:08,310
manipulate a lot easier within the code we set of basic global variable for my intervale so we can utilize

16
00:01:08,310 --> 00:01:14,340
that within our script and clear intervals and set intervals so we don't have our tooltip showing up

17
00:01:14,340 --> 00:01:16,150
indefinitely while we're hovered over.

18
00:01:16,260 --> 00:01:21,630
So there is a time limit in case the user is just sitting there hovering over their mouse and it's not

19
00:01:21,630 --> 00:01:22,590
always going to show up.

20
00:01:22,920 --> 00:01:24,780
So it's not going to show up indefinitely.

21
00:01:24,780 --> 00:01:28,230
It's going to be a three second max or 3000 milliseconds.

22
00:01:28,230 --> 00:01:32,130
Then we went through and we selected all the tool tips and added in the vet listeners.

23
00:01:32,370 --> 00:01:34,230
There's two event listeners that we needed to add in.

24
00:01:34,230 --> 00:01:36,290
So that was most over and most out.

25
00:01:36,300 --> 00:01:42,060
Basically, whenever we're hovering over it, we want the tooltip to show and what the tooltip to disappear

26
00:01:42,060 --> 00:01:44,400
whenever the user is not over it.

27
00:01:44,550 --> 00:01:46,320
So that's what we've got that functionality.

28
00:01:46,440 --> 00:01:51,990
We've got the one that disappears here, the display none as well as we've got the display block.

29
00:01:51,990 --> 00:01:56,540
So that's hiding and showing the element, the output element on the screen.

30
00:01:56,550 --> 00:02:02,730
We also saw that we could use the event trigger in order to the event object in order to get the X and

31
00:02:02,730 --> 00:02:03,450
Y position.

32
00:02:03,690 --> 00:02:05,580
So this is X and Y position of the mouse.

33
00:02:05,580 --> 00:02:09,090
And this is actually perfect, an ideal where we can set our tooltip.

34
00:02:09,090 --> 00:02:15,600
And then what we did is we use those variables and updated the style value of the tooltip element.

35
00:02:15,750 --> 00:02:22,170
And you can see that whenever we do an inspect that whenever we hover over, you can see that that output

36
00:02:22,170 --> 00:02:23,430
one is updating.

37
00:02:23,640 --> 00:02:29,910
So we're constantly updating those top left values as well as the display properties whenever we're

38
00:02:29,910 --> 00:02:30,570
hovering over.

39
00:02:30,690 --> 00:02:34,920
And that's what we're doing with the JavaScript we're manipulating as well as the inner HTML.

40
00:02:34,920 --> 00:02:39,870
So this is the content that is shown to the user whenever we're hovering over the tooltip and we're

41
00:02:39,870 --> 00:02:45,960
getting that content from the element itself, getting the attribute and we've set just an attribute.

42
00:02:45,960 --> 00:02:51,660
We've called it a data tool content, and you could actually call it whatever you want in selecting

43
00:02:51,660 --> 00:02:56,400
that attribute, as long as it's contained within the element and you've got an equal sign there that's

44
00:02:56,400 --> 00:02:59,720
going to equal whatever the value of that element attribute is.

45
00:02:59,730 --> 00:03:01,710
So go ahead and add this into your own project.

46
00:03:01,710 --> 00:03:05,100
If you have any questions or comments, please feel free to ask.

47
00:03:05,100 --> 00:03:09,370
I'm always happy to help clarify any of the content within the previous lessons.

48
00:03:09,630 --> 00:03:12,560
Thanks again for taking the section and I hope you've enjoyed it.