Hello, in this bootstrap four video, we're going to show you popovers. popovers allow you to overlay some small bit of content technically, or overlay a large amount of content, but generally you only want something small. So it just informs the use of what the doing or what they're clicking on can essentially be assigned to any element. For some secondary information. It's really simple to use. popovers do require a third party library called tether for positioning, don't worry in the description, there will be a link to the source code from this video.

And on the source code, there will be the template file. It's not something we've returned, but it's something that you will need. I've already got it on the desktop, so we just need to include it. You just want to include it before. The bootstrap file simply because the bootstrap file requires that For popovers, so just put whatever is called for me is corteva dot j Yes. And now the next thing we need to do is actually enable popovers.

And to do that just get some script tags on the go. And inside here we are going to be doing some jQuery. So function and in here we can do dollar square bracket, data dash, toggle equals Popova. gonna chain these curves, they're conflicting with the opening tag and will complete with the closing tag. You can mix and match them doesn't really matter. Drop popover This is a method, this data dash toggle will be linked to the actual buttons themselves that we're ready to start coding.

So the scope here is going to do the first buttons on the button. It's gonna have a type of button. You can assign it essentially to any sort of element, like I said before, so you don't have to just do it to this to a button but I'm just going to do it to a b ut to N buttons, secondary data dash container equals body data dash toggle. This is basically what we put right here equals popover. And now we want data displacement. This will vary depending on where you want to put You're popover.

So the first thing I'm going to show you is top. And the next you need to actually put the data dash content and this is the information that you're displaying. Once the user clicks I and the popover appears. So for this ons gonna simply put top just to keep it really simple. And inside here, you just put whatever you want your button to be called block. So you don't have to use a button, you use something else on the top popover.

So I'm just gonna copy and paste this. A few things that we need to change these change, data placement, data content, and the text inside the button. So let's get this damn Left, left, left. Right. Right. And right.

Save that. And now if we go to our web browser, refresh, we got four buttons. And if we click the top popover, we have a popover. button. popover, left popover, right popover. At the moment, the only way to close these popovers is to actually click the button.

Again, it's very common for them to be closed. If you click outside of the popover. To do this, just need a bit of extra JavaScript and a bit of extra HTML. It's really simple. What you want to do is go to whatever button you basically want to make into a dismissable popover. So I'm going to do it with the right pop over for now.

Let's do it. For the rest of the extra task, but data dash and we need trigger equals focus. And as we scroll down to the JavaScript area, we want dollar dot pop over dash, dismiss dot Popova. And in here, all you want to do is set the trigger to focus Let's save that. refresh our web browser. I want to click on the top pop over the right pop over, click outside.

As you can see, the right pop holder has now disappeared simply because We've made it into a dismissable Popova. So that's it for popovers if you have any questions, feel free to post them on our education platform. So now learning Dakota UK for slash question dot php, there will be a link in the description along with a link to the source code from this video where you can also get the tether dot j. s file, please rate, comment and subscribe and it really does help us keep the content free Plus he also helps us learn what you liked and what you didn't like about the videos. And as usual, thanks for watching, and I hope you have a great day.