1
00:00:00,420 --> 00:00:07,260
Similar to a bootstrap tooltip we also have bootstrap pop movers a pop over is different in that it

2
00:00:07,260 --> 00:00:09,900
accommodates more content including a header

3
00:00:12,730 --> 00:00:13,710
in this example.

4
00:00:13,720 --> 00:00:20,440
We've applied to pop over to a link element to pop over its position to the right but as you'll see

5
00:00:20,470 --> 00:00:28,290
this can be changed to create a pop over select or create an HMO element that you'd like to apply it

6
00:00:28,300 --> 00:00:30,880
to in this case.

7
00:00:30,890 --> 00:00:35,500
We've applied it to a link element using the 8a in our element.

8
00:00:35,510 --> 00:00:46,960
We've created a data a data toggle attribute set to pop over this is necessary for the pop over to function.

9
00:00:47,270 --> 00:00:50,850
We can give the pop over a title in this case.

10
00:00:50,960 --> 00:00:55,760
We've set it to test header and you can see that text displayed right here

11
00:00:58,930 --> 00:01:07,510
we can also give the pop over some content using the data content attribute.

12
00:01:07,580 --> 00:01:16,850
We have the text sample paragraph displayed in our pop over content area.

13
00:01:16,850 --> 00:01:23,570
Lastly we have a data placement attribute which allows you to specify the position of the pop over in

14
00:01:23,570 --> 00:01:24,070
this case.

15
00:01:24,080 --> 00:01:25,790
We have it set to the right.

16
00:01:25,790 --> 00:01:30,470
Other options include top bottom left.

17
00:01:30,650 --> 00:01:32,060
So we changed this to bottom

18
00:01:36,920 --> 00:01:40,180
and see that it's now changed the position

19
00:01:47,640 --> 00:01:53,780
once you've completed that portion it's necessary to initialize the pop over using J.

20
00:01:53,780 --> 00:02:00,470
Query to do so insert the following javascript code before the closing body type

21
00:02:05,360 --> 00:02:12,860
in our browser we can see that the popo pop over opens when we click on the link it only closes If we

22
00:02:12,860 --> 00:02:17,920
click on the link again so if we click anywhere on the page it doesn't close.

23
00:02:20,430 --> 00:02:21,840
We can add the attribute

24
00:02:24,600 --> 00:02:33,700
data trigger equals focus and this will make it so that we can click anywhere on the page in the pop

25
00:02:33,700 --> 00:02:34,560
over will close

26
00:02:38,590 --> 00:02:40,750
if we set the data trigger to hover

27
00:02:44,500 --> 00:02:49,570
we can view and dismiss the pop over by placing our mouse on or off the element.