Hello, in the video, I am going to show you how to implement a popover, so if you go to the official
website, popover is something like this for click this button, yellow or popover, and it just provides
some extra information so you can provide whatever extra information you want.
So that's it.
That's really all there is to a popover.
The few more things that you can change, the direction that they come from, you can dismiss unclick
as well.
And, you know, you disable elements, all of the stuff and provide a link to the official bootstrap
website so you can actually check all the other features out.
But we'll be covering the nuts and bolts of it in here.
Let's go over.
And first of all, to get a popover, we need to implement something that you click a button.
So feel free to check out my bottom video where I covered the button classes and the button system and
bootstrap.
I'm going to quickly go over this quickly type of that because I've already covered in a separate video.
OK, so now we need to specify what we're going to toggle data dash toggle because popover.
And we specify a title, and this is going to be epic popover.
Now we need to specify some content and you probably want the data that content equals some very epic
content and not just put a little thing like that popular with with basically what we're going to display
in the book.
So there we go.
We've got the button.
If we click on it, this doesn't appear with the title and the content.
So what we need to actually do is enable our popover.
In this case, we've only got the one with the multiple.
This would cover that as well the way you do.
You need to run some JavaScript.
You can run in a separate file or at the bottom, whichever you like.
And then to create a variable called popover trigger list, popover
equals square brackets, dot, dot com
document, dot, we
select all.
So basically is going to check for this is pretty cool.
We
use brackets, square brackets on solid.
We're going to check for data that's total equal to a check in for any elements that have this data
toggle, because frankly, if it has this then it's Popol.
But if it doesn't, then it's not a popover.
So now we're going to get a list of everything.
So the top of the list equals popover trialist dot map
function and pull the trigger.
So this is going over every single individual trigger.
And could raise like so let me just sort of almost done now we just need to put to you bootstrapped
popover.
So basically you're saying if you collect return, this particular popover is popover sugar and this
popover trigger, you know, has all of the title and the data contents that save that go back, reload,
click it.
We don't get it.
So let's make sure we get no errors, no errors.
Let me make cash and hard reload.
OK, it's still not working.
OK, so I made some spelling mistakes and, well, some of typewritten good class, actually the class
doesn't really matter.
Dated Torgau looking good.
Popover Torito equals epic popover.
Again, the title.
You shouldn't really affected and dated ash content.
OK, but I probably made a little silly mistake here.
Walpeup over trigger list equals square brackets does sliced up cool open bracket document query selecta
all open brackets.
Quotation marks, square brackets, data dash tuggle equals quotation mark there.
That's probably it.
And if I go back, there we go.
I just missed off, you know, and quotation marks inside of the quotation mark and that's it.
That's really all there is to it, Mark said.
You can have a look on how to change the direction it comes from dismissing it so we can click off like
Circle.
At the moment, we would have to click it again for it to disappear, to check them out.
And if you have any questions, as usual, pop me a message comment.
However, you can get in touch with me.
Let's do that.
Plus of the disco channel.
That a link to that in the description.
I look forward to seeing you in the next video.