1
00:00:01.00 --> 00:00:02.04
- [Chris] Hi, this is Chris Converse,

2
00:00:02.04 --> 00:00:04.03
and in this episode, we'll
create some tool tips

3
00:00:04.03 --> 00:00:07.02
that are powered completely
with HTML and CSS,

4
00:00:07.02 --> 00:00:08.05
and the best part is, they'll work with

5
00:00:08.05 --> 00:00:10.05
both click and touch events.

6
00:00:10.05 --> 00:00:12.02
So if you'd like to follow along with me,

7
00:00:12.02 --> 00:00:14.01
download the exercise
files, and let's begin

8
00:00:14.01 --> 00:00:18.09
by opening index.html in a text editor.

9
00:00:18.09 --> 00:00:20.03
And then, once you have
the HTML file open,

10
00:00:20.03 --> 00:00:21.05
you'll see that, inside of here,

11
00:00:21.05 --> 00:00:24.00
we have a header and an article element.

12
00:00:24.00 --> 00:00:25.03
I also have two comments here.

13
00:00:25.03 --> 00:00:27.01
This has the content for the tool tips,

14
00:00:27.01 --> 00:00:29.01
so we don't have to type all this.

15
00:00:29.01 --> 00:00:30.06
And if you'd like to see the
layout we're working with,

16
00:00:30.06 --> 00:00:33.08
you can open the index.html
file up in a browser.

17
00:00:33.08 --> 00:00:35.01
And now, back in the HTML file,

18
00:00:35.01 --> 00:00:37.07
the first thing we'll do
is add the necessary HTML

19
00:00:37.07 --> 00:00:39.03
so we can add a tool tip.

20
00:00:39.03 --> 00:00:40.08
So let's find the first
word we're going to create

21
00:00:40.08 --> 00:00:43.09
a tool tip for, which will be
this word here, patisserie.

22
00:00:43.09 --> 00:00:44.08
So what I'm going to do is get

23
00:00:44.08 --> 00:00:47.02
my cursor before the letter P.

24
00:00:47.02 --> 00:00:49.05
I'm going to put this on its own line.

25
00:00:49.05 --> 00:00:51.03
And then, after the E,
let's hit a few returns,

26
00:00:51.03 --> 00:00:53.09
so that we have the word
patisserie on its own line.

27
00:00:53.09 --> 00:00:55.01
Now, the browser doesn't mind that

28
00:00:55.01 --> 00:00:56.04
we have spaces in the HTML.

29
00:00:56.04 --> 00:00:58.08
It doesn't render more
than one space at a time.

30
00:00:58.08 --> 00:01:00.02
But this will give us the ability to add

31
00:01:00.02 --> 00:01:03.07
the necessary HTML and be
able see what we're doing.

32
00:01:03.07 --> 00:01:04.08
And the first thing
we'll do is come in here

33
00:01:04.08 --> 00:01:07.02
and add a label around our word.

34
00:01:07.02 --> 00:01:11.09
So, less than sign,
type in the word label.

35
00:01:11.09 --> 00:01:14.04
Let's end the tag.

36
00:01:14.04 --> 00:01:16.06
Let's get our cursor after our word.

37
00:01:16.06 --> 00:01:19.05
And let's end the element.

38
00:01:19.05 --> 00:01:23.03
Now let's come back
here inside of the tag.

39
00:01:23.03 --> 00:01:24.09
Let's add a class.

40
00:01:24.09 --> 00:01:29.06
So, class equals tooltip.

41
00:01:29.06 --> 00:01:31.04
Now let's get our cursor
after the word patisserie,

42
00:01:31.04 --> 00:01:34.03
but before the ending label element.

43
00:01:34.03 --> 00:01:36.03
Let's hit a few returns.

44
00:01:36.03 --> 00:01:40.00
And inside of here,
let's add an input field.

45
00:01:40.00 --> 00:01:42.05
So we'll type input, a space.

46
00:01:42.05 --> 00:01:45.06
We'll set the type to a checkbox.

47
00:01:45.06 --> 00:01:47.06
So this is an HTML form element,

48
00:01:47.06 --> 00:01:51.00
and checkboxes have the ability
to be checked or unchecked,

49
00:01:51.00 --> 00:01:52.04
and the browser will take care of this,

50
00:01:52.04 --> 00:01:54.09
and it's this particular item
that we're going to lock onto

51
00:01:54.09 --> 00:01:57.01
to show and hide our content.

52
00:01:57.01 --> 00:02:00.00
So, next, let's hit another return.

53
00:02:00.00 --> 00:02:02.03
Let's add a span element inside of here.

54
00:02:02.03 --> 00:02:05.09
So, begin the tag, end the tag.

55
00:02:05.09 --> 00:02:08.09
Inside of this span, we're
going to put the content.

56
00:02:08.09 --> 00:02:11.04
So let's scroll up here in the HTML.

57
00:02:11.04 --> 00:02:14.02
Here's the HTML comment for patisserie.

58
00:02:14.02 --> 00:02:19.00
Let's come in here and
copy all of this content.

59
00:02:19.00 --> 00:02:22.03
And down here inside of
this span, let's paste it.

60
00:02:22.03 --> 00:02:24.00
Now, at this point, save your HTML,

61
00:02:24.00 --> 00:02:25.03
and if you go back to the browser,

62
00:02:25.03 --> 00:02:27.08
you'll now see we have this
checkbox showing up here.

63
00:02:27.08 --> 00:02:29.06
And we can also see, after the word,

64
00:02:29.06 --> 00:02:33.04
we have our entire
description showing up here.

65
00:02:33.04 --> 00:02:35.07
So at this point, let's come
back to our exercise files.

66
00:02:35.07 --> 00:02:38.09
Let's open styles.css in our text editor.

67
00:02:38.09 --> 00:02:40.02
Let's scroll down and let's start

68
00:02:40.02 --> 00:02:42.08
adding some style to this new HTML.

69
00:02:42.08 --> 00:02:44.05
So the first thing we'll do is

70
00:02:44.05 --> 00:02:49.02
we'll type label.tooltip.

71
00:02:49.02 --> 00:02:51.03
Put in our brackets.

72
00:02:51.03 --> 00:02:53.07
And the first property
we'll set will be position.

73
00:02:53.07 --> 00:02:55.06
We're going to set this to relative.

74
00:02:55.06 --> 00:02:56.09
Because we're going to be positioning

75
00:02:56.09 --> 00:02:59.04
a span element inside
of the label element,

76
00:02:59.04 --> 00:03:00.09
we want to make sure that the span

77
00:03:00.09 --> 00:03:04.01
positions in relation to this label.

78
00:03:04.01 --> 00:03:07.03
Then, in the next line,
let's indicate to our users

79
00:03:07.03 --> 00:03:08.09
that these are tool tips.

80
00:03:08.09 --> 00:03:11.03
So we'll use a dotted purple line.

81
00:03:11.03 --> 00:03:16.05
So we'll type border-bottom,
then a colon and space.

82
00:03:16.05 --> 00:03:20.04
We'll set two pixels for the size.

83
00:03:20.04 --> 00:03:22.06
For the style, we'll set dotted.

84
00:03:22.06 --> 00:03:24.08
And for the color, we'll choose

85
00:03:24.08 --> 00:03:30.02
9a for red, 01 for green, and 56 for blue.

86
00:03:30.02 --> 00:03:32.08
And on the next line,
we'll set the type color.

87
00:03:32.08 --> 00:03:34.05
So, color, colon, space.

88
00:03:34.05 --> 00:03:35.09
Let's come up here and copy the color

89
00:03:35.09 --> 00:03:38.06
we just set to the border bottom.

90
00:03:38.06 --> 00:03:41.08
Paste that down here, hit a semicolon.

91
00:03:41.08 --> 00:03:44.07
So, next, let's target the cursor.

92
00:03:44.07 --> 00:03:49.04
So on the next line, we'll
set cursor, set to help.

93
00:03:49.04 --> 00:03:50.09
And now, if we check our
progress in a browser,

94
00:03:50.09 --> 00:03:52.08
we can see all of the
styles taking effect,

95
00:03:52.08 --> 00:03:56.04
and if we hover over this,
we'll see the help cursor.

96
00:03:56.04 --> 00:03:59.09
So now, we're going to style
the content of the tool tip.

97
00:03:59.09 --> 00:04:05.04
So, back in the CSS, we'll add
another rule, label.tooltip,

98
00:04:05.04 --> 00:04:08.04
space, span.

99
00:04:08.04 --> 00:04:10.07
Put in our brackets.

100
00:04:10.07 --> 00:04:13.04
The first property we're going
to set is going to be the width.

101
00:04:13.04 --> 00:04:17.01
We're going to set this to 120 pixels.

102
00:04:17.01 --> 00:04:19.00
Next, we'll set the font size.

103
00:04:19.00 --> 00:04:22.06
We'll set this to 0.9ems.

104
00:04:22.06 --> 00:04:25.05
Next, we'll set the line height.

105
00:04:25.05 --> 00:04:29.06
We're going to set this to 1.2ems.

106
00:04:29.06 --> 00:04:32.03
Next, we'll set the background color.

107
00:04:32.03 --> 00:04:35.04
And we'll set the hex value to 63 for red,

108
00:04:35.04 --> 00:04:40.05
0c for green, and 3c for blue.

109
00:04:40.05 --> 00:04:42.06
Next, we'll set the color of the type.

110
00:04:42.06 --> 00:04:46.04
We'll set this to white, so,
a pound sign and three Fs.

111
00:04:46.04 --> 00:04:50.04
We'll set text-align to center.

112
00:04:50.04 --> 00:04:54.00
Let me scroll up here a little bit.

113
00:04:54.00 --> 00:04:56.00
Next line, we're going to set padding.

114
00:04:56.00 --> 00:04:56.08
And we'll set the padding to

115
00:04:56.08 --> 00:04:58.06
eight pixels on the top and bottom,

116
00:04:58.06 --> 00:05:01.01
and 20 pixels on the right and left.

117
00:05:01.01 --> 00:05:04.08
And then, next, we'll set border radius.

118
00:05:04.08 --> 00:05:08.03
And we're going to set this to 20 pixels.

119
00:05:08.03 --> 00:05:10.01
And so, now with these
visual properties in place,

120
00:05:10.01 --> 00:05:12.08
now we're going to set some
of the positioning properties.

121
00:05:12.08 --> 00:05:13.09
So, the first thing we'll do is set

122
00:05:13.09 --> 00:05:17.01
the display type to a block.

123
00:05:17.01 --> 00:05:18.02
Then, on the next line, we're going to set

124
00:05:18.02 --> 00:05:22.01
a position property to absolute.

125
00:05:22.01 --> 00:05:24.08
And then, finally, for
the bottom property,

126
00:05:24.08 --> 00:05:27.06
we're going to set this to 90%.

127
00:05:27.06 --> 00:05:29.02
This way, the bottom of the span element

128
00:05:29.02 --> 00:05:31.05
will be at 90% of the height

129
00:05:31.05 --> 00:05:34.00
of the label element that it's inside of.

130
00:05:34.00 --> 00:05:35.00
And then, finally, we're going to set

131
00:05:35.00 --> 00:05:40.02
a left property to negative 30 pixels.

132
00:05:40.02 --> 00:05:41.08
And so, now if we previewed
this in a browser,

133
00:05:41.08 --> 00:05:44.04
we can now see this span
has our rounded corners,

134
00:05:44.04 --> 00:05:46.02
our background color, in white type,

135
00:05:46.02 --> 00:05:48.09
and it's being positioned,
again, with its bottom edge,

136
00:05:48.09 --> 00:05:50.06
at 90% of the height of the label,

137
00:05:50.06 --> 00:05:53.06
which positions the entire
span above the word.

138
00:05:53.06 --> 00:05:55.01
Now, you might need to
make some adjustments

139
00:05:55.01 --> 00:05:57.02
based on your layout, both for the width

140
00:05:57.02 --> 00:05:59.04
and the positioning of
the individual tool tips,

141
00:05:59.04 --> 00:06:00.04
to make sure that your tool tips

142
00:06:00.04 --> 00:06:03.02
don't fall off the edge of the screen.

143
00:06:03.02 --> 00:06:04.09
And at this point, we just
have one more thing to do,

144
00:06:04.09 --> 00:06:06.08
which is to make this interactive.

145
00:06:06.08 --> 00:06:08.09
So let's go back to our CSS.

146
00:06:08.09 --> 00:06:10.02
In the rule we just created,

147
00:06:10.02 --> 00:06:14.04
let's change display
block to display none.

148
00:06:14.04 --> 00:06:17.09
So that will now hide the
span element in the browser.

149
00:06:17.09 --> 00:06:19.04
And now, in the next rule,
we're going to make use

150
00:06:19.04 --> 00:06:21.03
of the adjacent sibling selector.

151
00:06:21.03 --> 00:06:23.03
So, to visually illustrate what this does,

152
00:06:23.03 --> 00:06:24.08
the adjacent sibling selector

153
00:06:24.08 --> 00:06:28.04
selects any element that
comes after the selected item.

154
00:06:28.04 --> 00:06:29.08
So the span that appears after

155
00:06:29.08 --> 00:06:32.03
the checked input item
is what is selected.

156
00:06:32.03 --> 00:06:36.00
And in this case, we're
going to set the display.

157
00:06:36.00 --> 00:06:38.07
So the span that appears
after the checked input item

158
00:06:38.07 --> 00:06:41.00
is what will be selected,
and when this is case,

159
00:06:41.00 --> 00:06:43.09
will reset the display type.

160
00:06:43.09 --> 00:06:50.05
So, back in our CSS file,
we'll target label.tooltip,

161
00:06:50.05 --> 00:06:52.09
then a space.

162
00:06:52.09 --> 00:06:55.05
We'll target the input device.

163
00:06:55.05 --> 00:06:57.02
Then we'll type colon, checked.

164
00:06:57.02 --> 00:06:58.07
We're going to see if the checkbox

165
00:06:58.07 --> 00:07:01.00
is actually in a checked state.

166
00:07:01.00 --> 00:07:02.04
Then a space.

167
00:07:02.04 --> 00:07:03.07
Then we'll put a tilde, which is

168
00:07:03.07 --> 00:07:06.01
the sibling adjacent selector.

169
00:07:06.01 --> 00:07:09.04
Then a space, then the word span.

170
00:07:09.04 --> 00:07:11.00
So, again, we're
targeting the span element

171
00:07:11.00 --> 00:07:13.00
if it comes after an input item

172
00:07:13.00 --> 00:07:14.09
that's in its checked state.

173
00:07:14.09 --> 00:07:16.05
And if that's the case,
we're going to come in here

174
00:07:16.05 --> 00:07:20.02
and set the display type to block.

175
00:07:20.02 --> 00:07:21.08
So with that in place, save your CSS.

176
00:07:21.08 --> 00:07:23.05
Let's go back to the browser.

177
00:07:23.05 --> 00:07:24.05
Let's come over here and click on

178
00:07:24.05 --> 00:07:26.08
either the label or the checkbox.

179
00:07:26.08 --> 00:07:29.06
This puts the input in its checked state,

180
00:07:29.06 --> 00:07:31.02
and will then show the span.

181
00:07:31.02 --> 00:07:33.03
And then, if you click
again on the checkbox,

182
00:07:33.03 --> 00:07:36.05
the label, or the span, this
will uncheck the checkbox,

183
00:07:36.05 --> 00:07:38.05
and then hide the span.

184
00:07:38.05 --> 00:07:39.06
And so, at this point, the last thing

185
00:07:39.06 --> 00:07:42.02
we need to do is hide the input field.

186
00:07:42.02 --> 00:07:45.01
So let's go back to our CSS.

187
00:07:45.01 --> 00:07:47.01
Let's add one more rule.

188
00:07:47.01 --> 00:07:50.09
So we'll type label.tooltip.

189
00:07:50.09 --> 00:07:54.09
Space, input.

190
00:07:54.09 --> 00:07:58.09
Put in our brackets, set
our display type to none.

191
00:07:58.09 --> 00:08:01.03
Save your work, go back to
the browser, hit reload,

192
00:08:01.03 --> 00:08:02.09
and now you'll simply see the word

193
00:08:02.09 --> 00:08:04.04
that acts as a tool tip.

194
00:08:04.04 --> 00:08:06.08
The input field is there, and is being set

195
00:08:06.08 --> 00:08:10.08
to either checked or not, but
it's not visible to the user.

196
00:08:10.08 --> 00:08:12.02
Now, with these CSS rules in place,

197
00:08:12.02 --> 00:08:13.07
you can now add as many tool tips

198
00:08:13.07 --> 00:08:15.01
to your webpage as you want.

199
00:08:15.01 --> 00:08:17.06
And each one will function independently.

200
00:08:17.06 --> 00:08:20.08
So now, each tool tip does
require a bit of extra HTML,

201
00:08:20.08 --> 00:08:23.08
and you could lessen the
amount of initial HTML required

202
00:08:23.08 --> 00:08:26.08
by injecting the extra
HTML using JavaScript.

203
00:08:26.08 --> 00:08:27.09
And if this sounds interesting,

204
00:08:27.09 --> 00:08:29.07
we do have two courses
here that demonstrate

205
00:08:29.07 --> 00:08:31.02
how to dynamically change the HTML

206
00:08:31.02 --> 00:08:33.03
in a page with JavaScript.

207
00:08:33.03 --> 00:08:34.06
You can watch chapter one of

208
00:08:34.06 --> 00:08:36.09
Creating Expandable Panels with jQuery,

209
00:08:36.09 --> 00:08:40.02
or chapter two of Creating a
Responsive Homepage Marquee.

210
00:08:40.02 --> 00:08:42.04
Both are available here in the library.

211
00:08:42.04 --> 00:08:44.06
And so, with that, I'll
conclude this episode,

212
00:08:44.06 --> 00:08:47.05
and as always, thanks for watching.