1
00:00:00,000 --> 00:00:04,432
[MUSIC]

2
00:00:04,432 --> 00:00:09,439
Let us now try to understand
several mechanisms to enable us to

3
00:00:09,439 --> 00:00:16,100
display information to the users
overlaying the content of your web page.

4
00:00:16,100 --> 00:00:21,040
So here we'll look at three different
constructs that are available in Bootstrap

5
00:00:21,040 --> 00:00:24,230
called tooltips, popovers, and modals.

6
00:00:25,570 --> 00:00:30,760
So what are tooltips, popovers and
modals and how are they useful?

7
00:00:30,760 --> 00:00:36,090
We'll look at some basic ideas first ,and
then we'll go on to look at some examples.

8
00:00:36,090 --> 00:00:39,844
In the exercise that follows,
we'll use tooltips and

9
00:00:39,844 --> 00:00:45,130
modals in our web page, and
we'll look at an example of popovers.

10
00:00:45,130 --> 00:00:51,610
So, as I mentioned, tooltips, popovers,
and modals are a way of revealing content

11
00:00:51,610 --> 00:00:56,090
to the users, when the user interacts
with certain elements on your web page.

12
00:00:56,090 --> 00:01:01,280
Say for example when the user's mouse

13
00:01:01,280 --> 00:01:06,640
clicks on a button, or
hovers over a button, or clicks on a link,

14
00:01:06,640 --> 00:01:11,830
or reaches a certain
point on your web page.

15
00:01:11,830 --> 00:01:16,170
So all these will trigger information
to be displayed to the users.

16
00:01:16,170 --> 00:01:17,470
So in this case,

17
00:01:17,470 --> 00:01:22,970
the information is displayed as
an overlay on top of your web page.

18
00:01:22,970 --> 00:01:25,700
So the underlying content of
the web page is still there, but

19
00:01:25,700 --> 00:01:30,280
this is laid out on top of
the underlying content.

20
00:01:30,280 --> 00:01:35,750
So in terms of flexibility, tooltips
are the simplest to implement, but

21
00:01:35,750 --> 00:01:40,160
at the same time have limited flexibility
in how they can display information.

22
00:01:40,160 --> 00:01:46,610
Popovers are more flexible than tooltips,
but they also have their own limitations.

23
00:01:46,610 --> 00:01:50,110
Modals give you the most
extensive support for

24
00:01:50,110 --> 00:01:54,980
displaying content in
a wide variety of ways.

25
00:01:56,250 --> 00:02:02,600
As an example, let's go to our
webpage that we have been working on.

26
00:02:02,600 --> 00:02:09,970
You see that when we hover our
mouse pointer onto this button.

27
00:02:09,970 --> 00:02:14,560
You see this message popping
up on the screen here,

28
00:02:14,560 --> 00:02:16,930
with some additional information.

29
00:02:16,930 --> 00:02:18,975
This is an example of a tooltip.

30
00:02:20,290 --> 00:02:24,210
This allows you to display smaller
amounts of information to the users.

31
00:02:24,210 --> 00:02:29,340
So for example if you are trying to
guide users through your website and

32
00:02:29,340 --> 00:02:33,740
want them to know what happens when you
click various locations any web page,

33
00:02:33,740 --> 00:02:38,240
these maybe a good way of reminding
them of what is expected.

34
00:02:38,240 --> 00:02:40,870
So you could easily design for example,

35
00:02:40,870 --> 00:02:46,250
walkthroughs of your website using
these tooltips to indicate to users.

36
00:02:46,250 --> 00:02:49,130
If you want a bit more
detailed information,

37
00:02:49,130 --> 00:02:51,300
then popovers would be more useful.

38
00:02:52,305 --> 00:02:56,920
The same example, implement and
using a popover would look like this.

39
00:02:56,920 --> 00:02:58,040
Now in this case,

40
00:02:58,040 --> 00:03:02,040
you will have to explicitly click
on the button to show the popover.

41
00:03:02,040 --> 00:03:06,670
So in that case, the popover is shown
with some title information, and

42
00:03:06,670 --> 00:03:12,210
then the actual content at
the bottom in that popover.

43
00:03:12,210 --> 00:03:17,200
Now, dismissing the popover will require
you again to click on the bottom there.

44
00:03:17,200 --> 00:03:19,640
So this is the behavior of a popover.

45
00:03:19,640 --> 00:03:26,420
In some circumstances,
popovers are more useful than tooltips.

46
00:03:26,420 --> 00:03:29,990
Our third kind of data
overlay is the modal.

47
00:03:29,990 --> 00:03:33,140
A modal allows you to present more

48
00:03:33,140 --> 00:03:37,410
detailed information to the users
than a tooltip and popover.

49
00:03:37,410 --> 00:03:44,060
The content of the modal is itself divided
into a header, body, and the footer.

50
00:03:44,060 --> 00:03:49,700
And the modal itself can contain
a lot more detailed information.

51
00:03:49,700 --> 00:03:52,740
And you can use the entire Bootstrap grid,

52
00:03:52,740 --> 00:03:57,630
inside the modal body,
to organize the actual content.

53
00:03:57,630 --> 00:04:02,860
We look at a couple of examples
of the use of modals next.

54
00:04:02,860 --> 00:04:06,220
Going to our web page,
you will see that on the right hand side,

55
00:04:06,220 --> 00:04:09,400
here we have a link here called Login.

56
00:04:09,400 --> 00:04:13,890
So when you click on that link,
you will notice that this modal

57
00:04:13,890 --> 00:04:17,600
with their login form is
popped up on the screen.

58
00:04:17,600 --> 00:04:21,060
So this is the typical
behavior of a modal.

59
00:04:21,060 --> 00:04:23,420
And so
here you can type in the information, and

60
00:04:23,420 --> 00:04:28,070
then click on the Sign In button
to sign in to your website.

61
00:04:29,190 --> 00:04:34,890
Going to your Coursera page, here is
a real life example of the use of a modal.

62
00:04:34,890 --> 00:04:38,430
So for example,
if you click on the Log In button here,

63
00:04:38,430 --> 00:04:43,190
you can see that on Coursera,
a form pops up on the screen.

64
00:04:43,190 --> 00:04:47,720
So this is another use of
a modal in your web page.

65
00:04:49,060 --> 00:04:53,252
Now that you have seen examples of
tooltips, popovers, and modals,

66
00:04:53,252 --> 00:04:58,522
let's go to the next exercise, where we'll
create a tooltip on our index.html page.

67
00:04:58,522 --> 00:05:04,379
We'll also create a modal that allows
the user to type in information for

68
00:05:04,379 --> 00:05:06,787
logging in into our web page.

69
00:05:06,787 --> 00:05:10,269
[MUSIC]