WEBVTT

00:00:07.680 --> 00:00:13.880
In this video we're going to learn how to use the bootstrap tools plugin to create tools apps.

00:00:14.010 --> 00:00:16.030
So we're going to create a couple of examples.

00:00:16.230 --> 00:00:20.190
One with a link and another one with a button.

00:00:20.400 --> 00:00:32.250
OK so this creates a div inside our container that displays a paragraph inside a div and it's right

00:00:32.250 --> 00:00:32.790
some text.

00:00:32.790 --> 00:00:38.070
This is a link so you get to create a link

00:00:41.470 --> 00:00:44.160
Kaylee's give its some attributes.

00:00:44.160 --> 00:00:49.770
Let's start with riff and listen to the Google home page

00:00:53.010 --> 00:00:56.260
.

00:00:56.760 --> 00:01:03.790
Also let's give it a title Google.

00:01:03.810 --> 00:01:08.280
So this is what Scott is showing the tool tip.

00:01:08.400 --> 00:01:09.420
OK.

00:01:09.540 --> 00:01:11.560
And now to use the tool tip.

00:01:11.600 --> 00:01:19.850
Again we are going to add a data toggle that's all set to tooltip.

00:01:20.050 --> 00:01:21.580
OK.

00:01:22.400 --> 00:01:22.720
OK.

00:01:22.740 --> 00:01:27.120
Now let's write some javascript code

00:01:30.180 --> 00:01:32.130
where we get to use the tooltip method.

00:01:32.190 --> 00:01:40.840
So we get to access our elements so we can access the elements of using its data toggle as abuse.

00:01:41.160 --> 00:01:49.630
So it's access all the elements which have a data toggle equal to tooltip.

00:01:50.390 --> 00:01:55.700
OK now we're going to use the tooltip method.

00:01:55.920 --> 00:02:07.440
OK so now if we refresh the page on the link we're supposed to see the tooltip but by default the tooltip

00:02:07.440 --> 00:02:13.890
shows up some of the elements since our elements is added so the page we can't see anything but it's

00:02:13.920 --> 00:02:15.400
odd.

00:02:15.570 --> 00:02:22.820
Another paragraph just before the event.

00:02:23.130 --> 00:02:26.350
Now if you over the link you can see the tooltip at the top.

00:02:26.660 --> 00:02:27.230
OK.

00:02:27.450 --> 00:02:28.380
We can change

00:02:31.830 --> 00:02:41.330
the way we can place the tooltip on the right of the elements if you want to by using the data placements

00:02:44.690 --> 00:02:49.890
attributes that we can say that to rights

00:02:52.800 --> 00:02:56.420
readable and refresh.

00:02:56.610 --> 00:03:00.450
Now is a part of the rates.

00:03:00.960 --> 00:03:04.840
You can set that to left or bosome as you want.

00:03:04.920 --> 00:03:11.350
OK so now let's create a button.

00:03:13.020 --> 00:03:13.410
OK

00:03:15.770 --> 00:03:17.740
.

00:03:17.830 --> 00:03:28.440
Is a type of button and also this stylus using the bus in class bus and primary.

00:03:28.690 --> 00:03:30.130
OK.

00:03:30.130 --> 00:03:32.140
And also this gives a data toggle

00:03:35.950 --> 00:03:38.190
to tooltip.

00:03:39.020 --> 00:03:43.790
Oh so that is a title puzzle to see.

00:03:43.800 --> 00:03:48.000
For example though you can see

00:03:50.800 --> 00:03:55.350
the saved refresh the page you can see the tooltip there.

00:03:55.530 --> 00:03:57.470
OK.

00:03:57.840 --> 00:04:06.940
We can place the tools of the parts of using the data placements attributes.

00:04:11.190 --> 00:04:12.780
OK.

00:04:12.780 --> 00:04:18.390
All right so let's explore a little bit the some of the

00:04:21.960 --> 00:04:24.910
methods and events of two steps.

00:04:24.960 --> 00:04:32.040
First let's make all the tooltip show or appear where the page page loads.

00:04:32.220 --> 00:04:36.030
So you get to access all the elements as has does have codes.

00:04:36.070 --> 00:04:47.000
This took all equal to it and then we're going to use the tooltip method.

00:04:47.160 --> 00:04:51.990
By this time we're going to use this with a barometer which is show.

00:04:52.390 --> 00:04:56.700
So if you load the page you'll see that all the tools zips there will appear

00:04:59.380 --> 00:05:15.460
ok or it's also let's say that the last message when a certain tool tooltip is hidden.

00:05:15.570 --> 00:05:17.790
So again so you get to access

00:05:21.090 --> 00:05:31.360
all the elements within days it's all equal to tooltip that were used the method all will need an event

00:05:31.440 --> 00:05:32.380
and a function.

00:05:32.430 --> 00:05:45.580
So the event is going to be headed towards B-S that tool to the function.

00:05:46.620 --> 00:05:49.590
It doesn't have any problem it's just sending an alert message

00:05:56.420 --> 00:05:58.300
for example to

00:06:01.180 --> 00:06:02.460
hit an example

00:06:06.810 --> 00:06:07.670
in history that's

00:06:10.380 --> 00:06:16.390
OK so you can see that this message shows when that tool tip is hidden.

00:06:16.560 --> 00:06:20.710
Also we can see are less significant