1
00:00:01,010 --> 00:00:08,000
Hello, in the video, I am going to show you how to implement a popover, so if you go to the official

2
00:00:08,390 --> 00:00:15,140
website, popover is something like this for click this button, yellow or popover, and it just provides

3
00:00:15,140 --> 00:00:19,850
some extra information so you can provide whatever extra information you want.

4
00:00:20,210 --> 00:00:21,330
So that's it.

5
00:00:21,410 --> 00:00:23,150
That's really all there is to a popover.

6
00:00:23,320 --> 00:00:30,620
The few more things that you can change, the direction that they come from, you can dismiss unclick

7
00:00:30,620 --> 00:00:31,400
as well.

8
00:00:31,550 --> 00:00:37,490
And, you know, you disable elements, all of the stuff and provide a link to the official bootstrap

9
00:00:37,490 --> 00:00:41,630
website so you can actually check all the other features out.

10
00:00:41,630 --> 00:00:46,920
But we'll be covering the nuts and bolts of it in here.

11
00:00:47,390 --> 00:00:48,530
Let's go over.

12
00:00:49,250 --> 00:00:57,040
And first of all, to get a popover, we need to implement something that you click a button.

13
00:00:58,910 --> 00:01:05,570
So feel free to check out my bottom video where I covered the button classes and the button system and

14
00:01:05,570 --> 00:01:06,200
bootstrap.

15
00:01:06,410 --> 00:01:11,780
I'm going to quickly go over this quickly type of that because I've already covered in a separate video.

16
00:01:24,430 --> 00:01:32,380
OK, so now we need to specify what we're going to toggle data dash toggle because popover.

17
00:01:34,660 --> 00:01:43,370
And we specify a title, and this is going to be epic popover.

18
00:01:44,620 --> 00:01:57,730
Now we need to specify some content and you probably want the data that content equals some very epic

19
00:01:58,150 --> 00:02:07,750
content and not just put a little thing like that popular with with basically what we're going to display

20
00:02:07,750 --> 00:02:08,170
in the book.

21
00:02:08,390 --> 00:02:08,950
So there we go.

22
00:02:08,960 --> 00:02:09,580
We've got the button.

23
00:02:09,580 --> 00:02:15,660
If we click on it, this doesn't appear with the title and the content.

24
00:02:15,970 --> 00:02:20,920
So what we need to actually do is enable our popover.

25
00:02:20,920 --> 00:02:23,060
In this case, we've only got the one with the multiple.

26
00:02:23,080 --> 00:02:25,430
This would cover that as well the way you do.

27
00:02:25,870 --> 00:02:28,780
You need to run some JavaScript.

28
00:02:28,990 --> 00:02:32,620
You can run in a separate file or at the bottom, whichever you like.

29
00:02:32,870 --> 00:02:37,510
And then to create a variable called popover trigger list, popover

30
00:02:41,920 --> 00:02:45,820
equals square brackets, dot, dot com

31
00:02:48,820 --> 00:02:50,790
document, dot, we

32
00:02:53,680 --> 00:02:55,630
select all.

33
00:02:55,900 --> 00:03:00,240
So basically is going to check for this is pretty cool.

34
00:03:00,730 --> 00:03:01,180
We

35
00:03:04,780 --> 00:03:08,230
use brackets, square brackets on solid.

36
00:03:09,880 --> 00:03:19,600
We're going to check for data that's total equal to a check in for any elements that have this data

37
00:03:19,600 --> 00:03:23,050
toggle, because frankly, if it has this then it's Popol.

38
00:03:23,050 --> 00:03:25,240
But if it doesn't, then it's not a popover.

39
00:03:25,780 --> 00:03:28,660
So now we're going to get a list of everything.

40
00:03:28,660 --> 00:03:36,040
So the top of the list equals popover trialist dot map

41
00:03:42,130 --> 00:03:45,320
function and pull the trigger.

42
00:03:45,340 --> 00:03:48,790
So this is going over every single individual trigger.

43
00:03:50,690 --> 00:04:05,240
And could raise like so let me just sort of almost done now we just need to put to you bootstrapped

44
00:04:06,290 --> 00:04:07,280
popover.

45
00:04:07,850 --> 00:04:15,680
So basically you're saying if you collect return, this particular popover is popover sugar and this

46
00:04:15,680 --> 00:04:22,790
popover trigger, you know, has all of the title and the data contents that save that go back, reload,

47
00:04:22,790 --> 00:04:23,360
click it.

48
00:04:24,120 --> 00:04:24,960
We don't get it.

49
00:04:24,960 --> 00:04:28,960
So let's make sure we get no errors, no errors.

50
00:04:28,970 --> 00:04:32,180
Let me make cash and hard reload.

51
00:04:35,520 --> 00:04:36,720
OK, it's still not working.

52
00:04:36,930 --> 00:04:43,200
OK, so I made some spelling mistakes and, well, some of typewritten good class, actually the class

53
00:04:43,200 --> 00:04:44,250
doesn't really matter.

54
00:04:44,490 --> 00:04:47,450
Dated Torgau looking good.

55
00:04:47,460 --> 00:04:51,350
Popover Torito equals epic popover.

56
00:04:51,360 --> 00:04:52,650
Again, the title.

57
00:04:53,060 --> 00:04:56,280
You shouldn't really affected and dated ash content.

58
00:04:57,520 --> 00:05:01,710
OK, but I probably made a little silly mistake here.

59
00:05:02,430 --> 00:05:11,190
Walpeup over trigger list equals square brackets does sliced up cool open bracket document query selecta

60
00:05:11,190 --> 00:05:13,500
all open brackets.

61
00:05:15,310 --> 00:05:23,680
Quotation marks, square brackets, data dash tuggle equals quotation mark there.

62
00:05:24,070 --> 00:05:25,350
That's probably it.

63
00:05:25,360 --> 00:05:28,120
And if I go back, there we go.

64
00:05:28,390 --> 00:05:36,370
I just missed off, you know, and quotation marks inside of the quotation mark and that's it.

65
00:05:36,610 --> 00:05:38,330
That's really all there is to it, Mark said.

66
00:05:38,350 --> 00:05:45,460
You can have a look on how to change the direction it comes from dismissing it so we can click off like

67
00:05:45,460 --> 00:05:45,740
Circle.

68
00:05:45,760 --> 00:05:50,350
At the moment, we would have to click it again for it to disappear, to check them out.

69
00:05:50,740 --> 00:05:54,940
And if you have any questions, as usual, pop me a message comment.

70
00:05:54,940 --> 00:05:56,890
However, you can get in touch with me.

71
00:05:57,070 --> 00:05:57,640
Let's do that.

72
00:05:57,640 --> 00:05:58,960
Plus of the disco channel.

73
00:05:59,050 --> 00:06:01,210
That a link to that in the description.

74
00:06:01,560 --> 00:06:04,060
I look forward to seeing you in the next video.