WEBVTT

00:00:07.450 --> 00:00:13.320
It this video we're going to learn how to use bootstrap to create popovers popovers they are similar

00:00:13.320 --> 00:00:16.900
to tool tips but they come with an extended view.

00:00:17.190 --> 00:00:20.230
And also we can place any ASML content in them.

00:00:20.880 --> 00:00:26.860
So let's go ahead and create a button and a pop over this will appear when we click on the button.

00:00:27.800 --> 00:00:34.020
So this creates our buzz in first place and text in it.

00:00:34.930 --> 00:00:36.490
And it's so much abuse.

00:00:36.500 --> 00:00:44.520
Let's give it a type of button and let's stylist's using the button gloves and the button primary class

00:00:44.530 --> 00:00:46.320
.

00:00:47.810 --> 00:00:50.060
OK.

00:00:51.180 --> 00:00:58.490
Now to use the popovers plugin will need need the to use the data attributes.

00:00:58.680 --> 00:01:05.700
So we're going to use a data toggle that will set to pop over.

00:01:06.360 --> 00:01:07.440
OK.

00:01:07.800 --> 00:01:12.400
And also will need data content.

00:01:13.080 --> 00:01:19.650
So this is the content that will show in the book that is on some text there.

00:01:19.680 --> 00:01:29.460
This is a pop over just like the one you see on an iPod.

00:01:30.380 --> 00:01:32.440
OK.

00:01:32.460 --> 00:01:39.500
And finally we'll need to write a script script

00:01:47.880 --> 00:01:51.960
so we'll use the popover method.

00:01:52.020 --> 00:02:02.050
But first let's access our button so we can access the person using the desert toggle attributes.

00:02:02.340 --> 00:02:10.800
So we're going to be accessing all the essential elements which have caused a data set to pop up and

00:02:10.800 --> 00:02:14.410
then we'll use the method people.

00:02:15.820 --> 00:02:24.580
So now let's refresh the page on the if you click on the button we can see the pope appearing.

00:02:25.080 --> 00:02:27.820
We can change the trigger events.

00:02:28.050 --> 00:02:39.960
So rather than clicking we continue to over that's by using the data trigger attributes and we can say

00:02:39.990 --> 00:02:42.170
that Jehovah for example.

00:02:42.250 --> 00:02:47.080
Now we will see that's when we hope that there wasn't the of of shows.

00:02:47.670 --> 00:02:52.130
If you leave it as it is it is OK.

00:02:52.360 --> 00:02:53.670
All right.

00:02:53.670 --> 00:02:59.360
Now let's use a few options with the proper method.

00:02:59.820 --> 00:03:06.930
So before we do that let's take the contents of the proposer.

00:03:07.260 --> 00:03:15.730
So rather than having a simple text we can have some ASML content in the probe.

00:03:15.930 --> 00:03:20.940
So for example we can place a header

00:03:25.290 --> 00:03:25.600
say

00:03:28.800 --> 00:03:31.080
over a paragraph

00:03:35.390 --> 00:03:36.270
of text.

00:03:36.420 --> 00:03:38.510
OK.

00:03:38.520 --> 00:03:45.590
Now we all need to use an option with the pop over method that it works.

00:03:45.720 --> 00:03:51.940
It's going to be a symbol and we need to say that to true.

00:03:51.990 --> 00:03:59.610
So now if we refresh the page and we Hoover on the button will see our pop over you can see the header

00:03:59.770 --> 00:04:03.640
behind it and we can see the paragraph right.

00:04:03.930 --> 00:04:12.540
There are other options we can use we can add a delay for the purpose of showing up and also a delay

00:04:12.540 --> 00:04:14.620
for the purpose of disappearing.

00:04:15.240 --> 00:04:23.760
The option will need to use for that is going to be delay and we need to use curly brackets so we can

00:04:23.760 --> 00:04:34.620
say that both the above is showing up using the show option we can set to a duration of milliseconds

00:04:35.960 --> 00:04:37.400
duration in milliseconds.

00:04:37.980 --> 00:04:46.680
And also we can add another one hide that we can say it's also

00:04:52.360 --> 00:04:57.120
300 milliseconds for example to Nobelist try and see.

00:04:57.450 --> 00:04:58.520
So there would be a delay.

00:04:58.530 --> 00:05:05.130
So I would hope it wasn't there would be a delay of one second and that the people way appears and also

00:05:05.130 --> 00:05:08.650
would we leave it to be a small delay and then it is abuse.

00:05:08.870 --> 00:05:09.180
OK

00:05:14.300 --> 00:05:19.400
let's have a look at some of the events linked to popovers.

00:05:19.420 --> 00:05:21.990
Let's have a look at one example.

00:05:21.990 --> 00:05:26.930
So let's add an action.

00:05:27.240 --> 00:05:32.520
Well let's have an alert message that shows when the river is hit it.

00:05:33.150 --> 00:05:35.400
OK.

00:05:35.430 --> 00:05:39.370
So first we're going to be accessing the proposal.

00:05:39.920 --> 00:05:44.240
Then we'll use the on method.

00:05:44.260 --> 00:05:48.500
So we're going to need events followed by that function to execute.

00:05:48.840 --> 00:05:57.420
So the event for this is going to be hidden both because those people will get

00:06:00.480 --> 00:06:01.260
the function

00:06:04.420 --> 00:06:12.200
he's going to be sending that message when the proposer disappears

00:06:15.500 --> 00:06:17.820
.

00:06:18.200 --> 00:06:23.570
That's it's appears that he is.

00:06:23.580 --> 00:06:25.010
And then you've got Elizabeth