1
00:00:03,580 --> 00:00:09,250
In the lecture before, we saw several ways of revealing content to the users.

2
00:00:09,250 --> 00:00:11,870
So, this would be an overlay on top of

3
00:00:11,870 --> 00:00:15,285
your web page to show the information to the users.

4
00:00:15,285 --> 00:00:17,880
So, we'll look at two of those approaches,

5
00:00:17,880 --> 00:00:21,575
Tooltips and Modals in this exercise.

6
00:00:21,575 --> 00:00:25,300
First, we will add a Tooltip to this page.

7
00:00:25,300 --> 00:00:29,040
So, going to index.html and in the Jumbotron,

8
00:00:29,040 --> 00:00:33,305
we see this button in the Jumbotron there.

9
00:00:33,305 --> 00:00:36,000
To this button, I'm going to add in a tooltip.

10
00:00:36,000 --> 00:00:38,125
So going into this button,

11
00:00:38,125 --> 00:00:44,380
what I will do now is simply go into the next line

12
00:00:44,380 --> 00:00:50,420
so that it's a bit more clear to write the code there and into this button,

13
00:00:50,420 --> 00:00:53,535
I'm going to introduce the tooltip here.

14
00:00:53,535 --> 00:00:57,740
So, after the button warning, I would say,

15
00:00:58,560 --> 00:01:04,550
data-toggle-tooltip, so you can see that

16
00:01:04,550 --> 00:01:12,230
the javascript component coming into use here and then data-html-true.

17
00:01:12,230 --> 00:01:17,630
So, if we apply this data HTML attribute and sent it to true,

18
00:01:17,630 --> 00:01:21,965
that means that the tooltip content can be styled using

19
00:01:21,965 --> 00:01:27,060
HTML and then they will say the next line,

20
00:01:27,060 --> 00:01:31,165
I will give the attribute of title.

21
00:01:31,165 --> 00:01:35,680
So, this is where the contents of the tooltip will be enclosed.

22
00:01:35,680 --> 00:01:42,090
So we will say "or call us at".

23
00:01:45,810 --> 00:01:52,950
So, you can see that I am using HTML to

24
00:01:52,950 --> 00:02:02,510
format the contents of the tooltip there.

25
00:02:06,070 --> 00:02:16,315
So with that, the tooltip is introduced into the button there and also the last attribute

26
00:02:16,315 --> 00:02:26,095
I will give is data-placement which I will give as bottom here.

27
00:02:26,095 --> 00:02:32,700
So, meaning that this tooltip will be shown to the bottom of this button here.

28
00:02:32,700 --> 00:02:36,815
After adding in this into the button,

29
00:02:36,815 --> 00:02:38,610
we'll now go and add

30
00:02:38,610 --> 00:02:45,130
some JavaScript code to the bottom of this page in order to activate this tooltip.

31
00:02:45,130 --> 00:02:47,505
Going to the bottom of the page,

32
00:02:47,505 --> 00:02:57,470
let me introduce the script there by adding in the tags for the script.

33
00:02:57,470 --> 00:03:04,665
Inside of this, we will define the actual JavaScript code here.

34
00:03:04,665 --> 00:03:07,790
So we will say dollar documents.

35
00:03:07,790 --> 00:03:13,910
So, this script is in using jQuery syntax here.

36
00:03:15,890 --> 00:03:20,880
So, this specifies when the document is ready,

37
00:03:20,880 --> 00:03:23,810
when this particular HTML document is ready

38
00:03:23,810 --> 00:03:28,775
for rendering and define invoke this particular function here.

39
00:03:28,775 --> 00:03:32,790
So, we supply the JavaScript function to be

40
00:03:32,790 --> 00:03:37,780
invoked at that point so we'll specify our function and then we'll say

41
00:03:38,570 --> 00:03:51,510
in brackets data-toggle-tooltip and tooltip.

42
00:03:53,240 --> 00:04:01,315
So, that is the code that we are going to introduce into this page here.

43
00:04:01,315 --> 00:04:09,255
This is in jQuery syntax and we will cover jQuery a little bit more in the next module.

44
00:04:09,255 --> 00:04:13,995
For the moment, this is specifying that wherever there is an attribute of

45
00:04:13,995 --> 00:04:19,650
this kind for that particular HTML tag,

46
00:04:19,650 --> 00:04:21,570
turn on the tooltip.

47
00:04:21,570 --> 00:04:25,420
So, but this change will save the changes and

48
00:04:25,420 --> 00:04:30,510
then go and have a look at how the tooltip looks like on the web page.

49
00:04:30,510 --> 00:04:32,760
Going to the web page,

50
00:04:32,760 --> 00:04:36,600
now when we hold our mouse pointer onto the pattern here,

51
00:04:36,600 --> 00:04:40,755
you can see that the tooltip is being displayed at the bottom here.

52
00:04:40,755 --> 00:04:44,950
So, you can notice that the content of this tooltip is

53
00:04:44,950 --> 00:04:50,115
exactly what we gave as the title attribute for that bottom there.

54
00:04:50,115 --> 00:04:54,095
So, this is how we can add tooltips to our page.

55
00:04:54,095 --> 00:04:58,030
Tooltips are a nice way of providing some additional information for

56
00:04:58,030 --> 00:05:03,370
the user when the user navigates to different locations on the page.

57
00:05:03,370 --> 00:05:06,790
Continuing with the exercise, in the next step,

58
00:05:06,790 --> 00:05:10,045
we are going to create a modal in our web page.

59
00:05:10,045 --> 00:05:17,665
This modal will host the login form and will be shown by using a link in their navbar.

60
00:05:17,665 --> 00:05:19,720
So, to get started,

61
00:05:19,720 --> 00:05:26,700
bootstrap advises that all modal related code be placed at the top of your page.

62
00:05:26,700 --> 00:05:31,530
So, I'm going to go in and write below the navbar here,

63
00:05:31,530 --> 00:05:34,455
I'm going to place in the code for the modal there.

64
00:05:34,455 --> 00:05:36,080
So to create a modal,

65
00:05:36,080 --> 00:05:43,400
I will start off by saying div ID login modal.

66
00:05:43,400 --> 00:05:48,355
So, we give an ID to this modal so that it can be triggered from

67
00:05:48,355 --> 00:05:53,895
the navbar link and then class as "modal fade".

68
00:05:53,895 --> 00:05:56,910
So you see that the class is modal and fade means

69
00:05:56,910 --> 00:06:00,220
that when the modal is brought onto the screen,

70
00:06:00,220 --> 00:06:07,185
it'll fade onto the screen and the role is as a dialog.

71
00:06:07,185 --> 00:06:11,625
So, which means that it is displayed on top of the page.

72
00:06:11,625 --> 00:06:14,195
Let's close off the div of the part.

73
00:06:14,195 --> 00:06:18,415
So inside here, we are going to create the modal.

74
00:06:18,415 --> 00:06:28,510
So, in there, I'm going to create the second div with the class as modal-dialog and then

75
00:06:28,510 --> 00:06:32,620
inside here we will define the content of

76
00:06:32,620 --> 00:06:39,550
the actual modal here and close off the div.

77
00:06:39,550 --> 00:06:45,220
And so, this is to be the modal content will be structured here.

78
00:06:45,220 --> 00:06:51,370
So, inside this modal dialog we will create another div with

79
00:06:51,370 --> 00:07:00,770
the class modal content and close

80
00:07:00,770 --> 00:07:10,350
off the div and a typical modal will contain a modal-header.

81
00:07:10,350 --> 00:07:14,255
So, that's where the next div is going to host.

82
00:07:14,255 --> 00:07:23,635
And then a modal body

83
00:07:23,635 --> 00:07:28,980
which will contain much of the modal related content.

84
00:07:28,980 --> 00:07:34,835
All these sections of the modal are optional,

85
00:07:34,835 --> 00:07:38,020
but at least you should have one such section in your modal

86
00:07:38,020 --> 00:07:41,645
otherwise it does not make any sense to create the modal there.

87
00:07:41,645 --> 00:07:46,455
So, with this, the structure of the modal is now ready.

88
00:07:46,455 --> 00:07:50,550
So, we are going to go in and fill in the content into this modal.

89
00:07:50,550 --> 00:07:54,005
So now, we need to define what goes into the modal.

90
00:07:54,005 --> 00:07:57,505
Now, in the header we are going to put in a button,

91
00:07:57,505 --> 00:08:01,770
a cross-button in the modal which when clicked will dismiss the modal.

92
00:08:01,770 --> 00:08:05,715
That's the usual way modals are designed.

93
00:08:05,715 --> 00:08:08,805
And the modal body will itself contain the form.

94
00:08:08,805 --> 00:08:12,610
Now, a modal can contain anything that you want, so for example,

95
00:08:12,610 --> 00:08:16,040
if you click on an image in

96
00:08:16,040 --> 00:08:19,630
an image gallery and you want to show the larger size of the image,

97
00:08:19,630 --> 00:08:24,415
even there you can use a modal to display the information.

98
00:08:24,415 --> 00:08:26,280
Now in this exercise,

99
00:08:26,280 --> 00:08:31,765
we are going to use the modal to host a form that is shown for the user.

100
00:08:31,765 --> 00:08:35,695
Okay, now, in the modal header,

101
00:08:35,695 --> 00:08:40,175
we are going to introduce a button with

102
00:08:40,175 --> 00:08:49,170
the type button and class close.

103
00:08:49,170 --> 00:08:59,080
So, you see that this is a button that is used to close the modal and then you will say,

104
00:08:59,080 --> 00:09:04,685
data-dismiss and then modal.

105
00:09:04,685 --> 00:09:07,180
So, what this means is that this particular button

106
00:09:07,180 --> 00:09:09,845
when clicked will dismiss the modal from the screen.

107
00:09:09,845 --> 00:09:18,700
And this button, I'm going to use the times,

108
00:09:21,100 --> 00:09:24,900
will display as a cross in the modals here.

109
00:09:24,900 --> 00:09:27,380
So I would say times here.

110
00:09:27,380 --> 00:09:30,549
Before this button, we are going to introduce

111
00:09:30,549 --> 00:09:36,470
a header which we will display in the modal's header so I

112
00:09:36,470 --> 00:09:46,180
will start out with an h4 with the class modal title.

113
00:09:46,180 --> 00:09:48,635
And then inside this h4,

114
00:09:48,635 --> 00:09:52,200
I will include the title of the modal,

115
00:09:52,200 --> 00:09:56,995
which is login because this is going to show the login form.

116
00:09:56,995 --> 00:10:01,625
Now that we have put in some details into this modal,

117
00:10:01,625 --> 00:10:06,110
let's add in the link into our navbar which will

118
00:10:06,110 --> 00:10:07,770
trigger this modal and then we will have

119
00:10:07,770 --> 00:10:11,515
a quick look at how the modal looks like on the screen.

120
00:10:11,515 --> 00:10:14,280
Going to the navbar,

121
00:10:14,280 --> 00:10:16,095
right after the UL here,

122
00:10:16,095 --> 00:10:17,845
I'm going to include in

123
00:10:17,845 --> 00:10:22,910
a link which can be used to trigger the showing and hiding of the modal.

124
00:10:22,910 --> 00:10:31,080
So to do that, I will go in and use a span with the class navbar-text.

125
00:10:31,080 --> 00:10:37,950
This is what allows me to include a link into the navbar and show it as text.

126
00:10:37,950 --> 00:10:39,995
So, inside the span,

127
00:10:39,995 --> 00:10:45,345
I will use an A with the data-toggle,

128
00:10:45,345 --> 00:10:50,010
so you can see the JavaScript data-toggle coming in and

129
00:10:50,010 --> 00:10:55,400
the data-toggle is for a modal and then data-target.

130
00:10:55,400 --> 00:11:03,940
You recall that we had given the ID as login modal to our-

131
00:11:04,170 --> 00:11:06,460
Modal that we included.

132
00:11:06,460 --> 00:11:11,950
So, I'm going to use that as my data target with the hash in front of that.

133
00:11:11,950 --> 00:11:15,815
And inside here, I will go in and use

134
00:11:15,815 --> 00:11:24,520
a font awesome icon for a login.

135
00:11:24,520 --> 00:11:28,710
So, this is a font awesome ''fa- sign-in''

136
00:11:28,800 --> 00:11:37,945
icon and say login and close the e-tech.

137
00:11:37,945 --> 00:11:43,975
So with that, let's save the changes and take a look at the web page.

138
00:11:43,975 --> 00:11:47,265
Going to our web page in the browser,

139
00:11:47,265 --> 00:11:50,530
you now see that on the right edge,

140
00:11:50,530 --> 00:11:56,680
you see this login with this icon created there.

141
00:11:56,680 --> 00:12:00,850
So this is the link that is going to trigger the showing of the modal.

142
00:12:00,850 --> 00:12:02,530
So if I click on this link,

143
00:12:02,530 --> 00:12:05,015
then the modal will show on the screen.

144
00:12:05,015 --> 00:12:08,500
So notice that when we created this modal we said,

145
00:12:08,500 --> 00:12:14,565
header which contained the login and then also this button and then the body,

146
00:12:14,565 --> 00:12:17,605
currently empty, we're going to introduce more code in there.

147
00:12:17,605 --> 00:12:20,860
Now if you click on this button the modal will disappear.

148
00:12:20,860 --> 00:12:23,170
Click on that again, the modal is shown.

149
00:12:23,170 --> 00:12:25,470
Even if you click outside the modal, the modal will disappear.

150
00:12:25,470 --> 00:12:30,985
So this is the behavior of the modal that we have come to expect.

151
00:12:30,985 --> 00:12:36,275
Now, in the next step I'm going to go in and introduce the form here.

152
00:12:36,275 --> 00:12:39,990
I'm not going to explain the details of the form because you have

153
00:12:39,990 --> 00:12:43,924
already studied forms in one of the earlier lessons.

154
00:12:43,924 --> 00:12:47,830
So I'm just going to simply go in and paste the form code and

155
00:12:47,830 --> 00:12:52,370
then we'll have a look at the form in the modal here.

156
00:12:52,370 --> 00:12:54,505
Coming back to the code,

157
00:12:54,505 --> 00:12:57,640
you can now see that in the modal body,

158
00:12:57,640 --> 00:13:01,115
I have filled in a form.

159
00:13:01,115 --> 00:13:07,850
And then I have two form groups here with an input with the type email

160
00:13:07,850 --> 00:13:14,795
and input type password and then I have a checkbox here that I have.

161
00:13:14,795 --> 00:13:21,970
So, this should be easy for you to decipher what this form is code structure EEs,

162
00:13:21,970 --> 00:13:26,505
from your understanding of how Bootstrap forms are designed.

163
00:13:26,505 --> 00:13:28,250
I have put in two buttons.

164
00:13:28,250 --> 00:13:33,060
One is a submit button and another one is a cancel button.

165
00:13:33,060 --> 00:13:36,440
The cancel button has the first one.

166
00:13:36,440 --> 00:13:41,580
The cancel button here has data dismiss model.

167
00:13:41,580 --> 00:13:45,215
So which means that when you click on the cancel button the model will be dismissed.

168
00:13:45,215 --> 00:13:50,170
And the other one is a submit button which is used to submit the form.

169
00:13:50,170 --> 00:13:51,480
So with this changes,

170
00:13:51,480 --> 00:13:55,550
let's save the changes and then go and have a look at our Web page.

171
00:13:55,550 --> 00:13:57,205
Going back to the web page,

172
00:13:57,205 --> 00:14:04,045
now you click on the login then you'll see a form for a user to sign in.

173
00:14:04,045 --> 00:14:07,025
So you'll see that you have two boxes here.

174
00:14:07,025 --> 00:14:09,850
Input boxes here for entering email and password,

175
00:14:09,850 --> 00:14:12,870
and then a checkbox for say Remember me.

176
00:14:12,870 --> 00:14:15,320
And then you have a sign in and a cancel.

177
00:14:15,320 --> 00:14:17,860
So if you click on the cancel the modal will go away.

178
00:14:17,860 --> 00:14:20,710
Just like when you click on the cross there.

179
00:14:20,710 --> 00:14:23,915
And then if you fill in this information and keep click on sign in,

180
00:14:23,915 --> 00:14:26,120
the sign in process should be initiated.

181
00:14:26,120 --> 00:14:29,885
At this moment we don't have a server for this to work,

182
00:14:29,885 --> 00:14:34,640
but I'm just showing you in Bootstrap how you would create a form like this.

183
00:14:34,640 --> 00:14:37,240
I'm sure you have seen things like these on

184
00:14:37,240 --> 00:14:40,610
many websites where when you click on a login button

185
00:14:40,610 --> 00:14:43,220
something like this with the form pops up on the screen

186
00:14:43,220 --> 00:14:46,585
and expects you to type in the information.

187
00:14:46,585 --> 00:14:50,160
So now you'll see how you can leverage models to display

188
00:14:50,160 --> 00:14:54,740
information overlaying your web page.

189
00:14:54,740 --> 00:14:57,910
With this we complete this exercise.

190
00:14:57,910 --> 00:15:01,950
In this exercise, we have seen the use of tooltips

191
00:15:01,950 --> 00:15:06,835
and we have seen the use of models to display content.

192
00:15:06,835 --> 00:15:14,200
This is a good time for you to do a git-commint with the message tool tips and models.