1
00:00:00,410 --> 00:00:05,930
In this section, we're back to components and this is going to be showing you how to create a tooltip

2
00:00:05,930 --> 00:00:06,470
pop up.

3
00:00:06,740 --> 00:00:11,930
So our tooltip is whenever you hover over a particular element, then this can have this little pop

4
00:00:11,930 --> 00:00:12,080
up.

5
00:00:12,090 --> 00:00:16,460
So depending on where your mouse is and whenever you're on top of the element, you're going to see

6
00:00:16,460 --> 00:00:17,570
this pop up element.

7
00:00:17,810 --> 00:00:23,840
So this is going to be a section looking at most events, as well as tracking the coordinates of where

8
00:00:23,840 --> 00:00:29,000
the mouse position is and of course, hiding, showing elements and attaching content to those elements.

9
00:00:29,180 --> 00:00:30,100
So let me show you this one.

10
00:00:30,440 --> 00:00:36,170
So I've got some dummy placeholder text, and both of the JavaScript values here are going to be where

11
00:00:36,170 --> 00:00:37,400
the tooltip is going to show up.

12
00:00:37,580 --> 00:00:41,990
So you see, whenever we hover over, we get tooltip and tooltip content.

13
00:00:42,140 --> 00:00:45,200
And this information is actually coming from the HTML.

14
00:00:45,320 --> 00:00:49,550
So the content that's being output is being displayed from that HTML.

15
00:00:49,670 --> 00:00:55,610
You can see that within that element itself, we've got the content that we want to show within the

16
00:00:55,610 --> 00:01:01,460
tooltip, under data dash tool content, and this is what's going to be shown within the tooltip whenever

17
00:01:01,460 --> 00:01:02,240
we hover over.

18
00:01:02,360 --> 00:01:04,640
And then this is where the JavaScript element is.

19
00:01:04,970 --> 00:01:08,070
And this kind of stuff is really useful to include within websites.

20
00:01:08,070 --> 00:01:09,290
That comes in very handy.