1
00:00:00,990 --> 00:00:04,860
Welcome to our lesson, where we're going to be setting up our structure for the tool tips.

2
00:00:05,100 --> 00:00:11,130
I've got some generic HTML here where I've got a paragraph, a div, some content in it, and I'm going

3
00:00:11,130 --> 00:00:15,570
to be using the span's within these elements in order to add the tooltip.

4
00:00:15,840 --> 00:00:21,360
So first of all, we need a way to select it from the rest of the content so we can add in a class of

5
00:00:21,360 --> 00:00:21,990
tooltip.

6
00:00:22,230 --> 00:00:28,500
And then we also need to add in a data object where we've got some content that we want to pop up for

7
00:00:28,500 --> 00:00:29,190
the tooltip.

8
00:00:29,580 --> 00:00:32,190
So tool tip content.

9
00:00:32,430 --> 00:00:37,770
So this is actually what's going to be displayed to the user as they hover over the tooltip.

10
00:00:37,950 --> 00:00:42,930
And let's also add in one more and we're going to add that into the other spen that we've got down here

11
00:00:42,930 --> 00:00:47,930
below where we're also got JavaScript and maybe in this one we can just output JavaScript.

12
00:00:48,660 --> 00:00:53,130
So that gives us some content that we can work with and make sure that we still have the same tooltip

13
00:00:53,310 --> 00:00:58,260
that says a class of tooltip so that we can utilize that information.

14
00:00:58,260 --> 00:01:02,640
Blank element that we can use can also output some of the tooltip information.

15
00:01:02,670 --> 00:01:08,200
So refreshing our page, not a whole lot to see as we don't have any functionality in there quite yet.

16
00:01:08,220 --> 00:01:16,320
Also going into our success, let's add some styling for the tool tips so we can distinguish them from

17
00:01:16,320 --> 00:01:17,270
the rest of the page.

18
00:01:17,550 --> 00:01:19,180
We can set them up to blue.

19
00:01:19,200 --> 00:01:21,850
We can also set in a background color for them as well.

20
00:01:22,320 --> 00:01:25,410
So again, so we can distinguish them from the rest of the content.

21
00:01:25,650 --> 00:01:26,640
So refreshing it.

22
00:01:26,760 --> 00:01:33,900
So now we've got our two tool tips on page and we're going to use the output element as the one that's

23
00:01:33,900 --> 00:01:36,280
going to contain the tooltip information.

24
00:01:36,300 --> 00:01:38,340
So this is the one that's going to move around on the page.

25
00:01:38,490 --> 00:01:41,990
So adding in the appropriate styling, so display none.

26
00:01:42,420 --> 00:01:49,500
Let's set its position as absolute so we can position it on the page and then have a border of one pixel

27
00:01:49,500 --> 00:01:50,100
that read.

28
00:01:50,340 --> 00:01:55,710
And again, this is going to be the tooltip that's going to show up on the page can also set a background

29
00:01:55,710 --> 00:01:56,130
color.

30
00:01:56,400 --> 00:02:01,200
And this can be anything that you want that anything that fits into your styling, as does some generic

31
00:02:01,200 --> 00:02:05,570
content here, so that we've got some really basic styling being added into it.

32
00:02:05,970 --> 00:02:07,610
Also maybe some padding.

33
00:02:07,620 --> 00:02:13,530
So five pixel and by default, we can set a top position of one hundred picks and the left position

34
00:02:13,530 --> 00:02:17,510
of 50 picks if we wanted to, so that we can see that tooltip content.

35
00:02:18,210 --> 00:02:19,620
So that's what we need for styling.

36
00:02:19,620 --> 00:02:23,670
And we've got all of the HTML elements in place as well.

37
00:02:23,890 --> 00:02:27,300
So coming up next is where we're going to make use of JavaScript.

38
00:02:27,510 --> 00:02:29,040
So select in the elements, whatever.

39
00:02:29,040 --> 00:02:33,770
We're hovering over that element with the class of tooltip and then showing the tooltip just above it.

40
00:02:33,810 --> 00:02:39,690
So go ahead and open up your editor, create some basic HTML content, give the elements that you want,

41
00:02:39,690 --> 00:02:46,620
apply the tooltip, a class of tooltip, as well as Tooele content in order to get information that

42
00:02:46,620 --> 00:02:48,300
you want to display within the tooltip.

43
00:02:48,510 --> 00:02:51,030
And coming up next, we're going to bring the JavaScript in.