1
00:00:00,120 --> 00:00:03,160
Are you ready to bring the JavaScript in and I know that's what you're here for.

2
00:00:03,180 --> 00:00:09,270
So let's begin and we need to first select our elements into usable objects and JavaScript.

3
00:00:09,480 --> 00:00:13,670
So using const because this is going to be a node list that's not going to be changing.

4
00:00:13,890 --> 00:00:20,700
Let's create an object called Tool Tips and we're going to use document query selector, all because

5
00:00:20,700 --> 00:00:25,350
we're selecting all the elements with a class of tool tips or tooltip.

6
00:00:25,950 --> 00:00:27,560
Save that and refresh.

7
00:00:27,570 --> 00:00:32,370
And of course we don't see anything different quite yet, but we see within tool tips we've got a node

8
00:00:32,370 --> 00:00:36,270
list of two items so we can loop through those elements.

9
00:00:37,110 --> 00:00:39,850
So creating a for loop or we could do so.

10
00:00:39,850 --> 00:00:47,640
Let's do a simple for loop setting are variable of AI to be zero and looping through while AI is less

11
00:00:47,640 --> 00:00:54,780
than a tool, tips and node lists have lengths just like arrays looping through all of the elements

12
00:00:55,140 --> 00:00:56,700
that have a class of tooltip.

13
00:00:57,460 --> 00:01:03,180
And then let's increment I so this will output all of those elements and make them usable.

14
00:01:03,670 --> 00:01:11,830
So selecting our tool tips object and selecting the index value of AI, we can select the element and

15
00:01:11,830 --> 00:01:13,770
we can also add an event listener at this point.

16
00:01:14,080 --> 00:01:15,930
So let's add an event listener.

17
00:01:15,940 --> 00:01:22,750
The event listener that we want to add is mouseover and whenever mouseover happens, then we want to

18
00:01:22,750 --> 00:01:23,470
run the function.

19
00:01:23,490 --> 00:01:25,550
So the blockquote that's going to be contained within here.

20
00:01:25,870 --> 00:01:31,310
So for now, what we'll do is will console, log out the event, object into the console.

21
00:01:31,600 --> 00:01:37,360
So now every time we hover over them, whenever we got mouseover, then we've got this firing off the

22
00:01:37,360 --> 00:01:38,800
event object is firing off.

23
00:01:39,040 --> 00:01:41,350
And this is actually where we want to add in the tooltip.

24
00:01:41,710 --> 00:01:46,470
And we can also get the element that triggered that event as well there.

25
00:01:46,480 --> 00:01:48,190
So we can see that's the element.

26
00:01:48,490 --> 00:01:53,020
And that means that we can get the data that's contained within the attribute.

27
00:01:53,320 --> 00:02:02,170
And we've got this object using get attribute because the data attribute the data to a content attribute

28
00:02:02,170 --> 00:02:10,480
is contained here within the attributes of the element, and we can get the value of that attribute.

29
00:02:10,690 --> 00:02:13,540
So let's set up a variable for that and we'll just call it Holder.

30
00:02:13,960 --> 00:02:17,730
So now whenever we hover over, we get the contents of the tool.

31
00:02:18,280 --> 00:02:24,250
So now it's a matter of calculating out where we want the tooltip to show up and updating the content

32
00:02:24,250 --> 00:02:27,940
with an output of the contents of tooltip.

33
00:02:28,250 --> 00:02:33,310
So let's do one more thing before we conclude this lesson, and we're going to select the element with

34
00:02:33,310 --> 00:02:40,510
the class of output so that we can utilize that within our upcoming lesson.

35
00:02:41,290 --> 00:02:42,340
So go ahead and do that.

36
00:02:42,520 --> 00:02:44,440
Add in the event listener for your tooltip.

37
00:02:44,440 --> 00:02:46,600
So you might have more than just the two that I have.

38
00:02:47,080 --> 00:02:48,610
And this is fully dynamic's.

39
00:02:48,610 --> 00:02:54,520
So the more that you add in and they're all going to be adding in and having that mouseover function

40
00:02:54,520 --> 00:02:57,730
being applied to them, you've added in the event, listener, you're going to be ready for the next

41
00:02:57,730 --> 00:02:59,650
lesson or we're going to be showing you the tooltip.