1
00:00:00,480 --> 00:00:07,140
In this lesson we'll be creating a tooltip a tooltip is a small pop a box that appears over an element

2
00:00:07,710 --> 00:00:09,510
when a mouse pointer hovers over it.

3
00:00:12,040 --> 00:00:19,570
In this example we have the word tooltip defined as a link element when we hover our mouse over the

4
00:00:19,570 --> 00:00:29,380
word a tooltip pop up box appears the tooltip has some text content inside of it to create a tooltip

5
00:00:29,950 --> 00:00:37,670
select or create any HMO element that you want to apply the tooltip to in our example.

6
00:00:37,680 --> 00:00:39,830
We have a link element using the 8a

7
00:00:43,160 --> 00:00:43,570
next.

8
00:00:43,940 --> 00:00:50,180
We've applied the attribute data toggle and set it to tooltip.

9
00:00:50,190 --> 00:00:54,630
We've also created a data placement attribute and set it to top

10
00:00:57,630 --> 00:01:01,950
the data placement attribute defines the position of the tooltip.

11
00:01:02,160 --> 00:01:11,260
We can set it to top bottom left or right next create a title attribute and insert the words that you

12
00:01:11,260 --> 00:01:13,920
would like displayed in your tooltip.

13
00:01:13,960 --> 00:01:23,840
In our case we have the words insert tip and so you can see that text inside the tooltip.

14
00:01:24,320 --> 00:01:25,130
If we change it

15
00:01:30,850 --> 00:01:31,780
you can see it updates

16
00:01:35,180 --> 00:01:41,820
will also go ahead and change the data placement and you can see what that looks like so let's bottom

17
00:01:43,830 --> 00:01:44,310
left

18
00:01:48,590 --> 00:01:49,460
can right

19
00:01:53,660 --> 00:01:55,270
after that's complete.

20
00:01:55,280 --> 00:02:01,030
It's necessary to initialize the tooltip function with J query to do so.

21
00:02:01,040 --> 00:02:08,670
Add the following javascript your HDMI page before the closing body tag this code block will enable

22
00:02:08,700 --> 00:02:10,920
all tool tips in the existing document.