1
00:00:00,008 --> 00:00:04,670
[MUSIC]

2
00:00:04,670 --> 00:00:05,545
Hi everybody.

3
00:00:05,545 --> 00:00:08,836
I'm Dave Conner, a web designer and
front end developer.

4
00:00:08,836 --> 00:00:12,907
In this Treehouse Workshop we're gonna
learn how to create helper tooltips using

5
00:00:12,907 --> 00:00:15,200
nothing more than HTML and CSS.

6
00:00:15,200 --> 00:00:18,920
Tooltips are a great way to provide
additional information to your users.

7
00:00:18,920 --> 00:00:22,170
They're a common design pattern and can
be found in many of the popular front end

8
00:00:22,170 --> 00:00:25,090
frameworks, like Bootstrap or Foundation.

9
00:00:25,090 --> 00:00:28,010
Both of these frameworks use
JavaScript to handle frameworks.

10
00:00:28,010 --> 00:00:29,120
But as you'll soon see,

11
00:00:29,120 --> 00:00:31,959
it's actually very easy to create
this effect using CSS alone.

12
00:00:33,060 --> 00:00:36,180
The technique that we're about to
learn employs both pseudo-elements and

13
00:00:36,180 --> 00:00:37,880
custom data attributes.

14
00:00:37,880 --> 00:00:41,340
The data attribute will store our
tooltip message in the HTML and

15
00:00:41,340 --> 00:00:44,720
the value of that will display
as the tooltip content.

16
00:00:44,720 --> 00:00:47,260
Let's get started and
we can see it in action.

17
00:00:47,260 --> 00:00:49,640
As you can see, we have a simple web page.

18
00:00:49,640 --> 00:00:53,850
It has some basic styling applied,
which you can find in style CSS.

19
00:00:53,850 --> 00:00:56,850
Nothing too major just some
boiler play code for the demo.

20
00:00:56,850 --> 00:00:59,270
Right now we have no tooltips.

21
00:00:59,270 --> 00:01:01,820
If you were to open this
up in a browser you can see

22
00:01:01,820 --> 00:01:04,490
there is nothing here when
we have over the text.

23
00:01:04,490 --> 00:01:07,420
We are going to add our tool tips to
the two span elements that we have

24
00:01:07,420 --> 00:01:08,330
here in green.

25
00:01:08,330 --> 00:01:12,650
Let's open up index.html and
write the extra markup data needed.

26
00:01:12,650 --> 00:01:17,390
Looking at the HTML, you see we have a div
that contains a headline and a p tag.

27
00:01:17,390 --> 00:01:20,030
Inside the p tag, we have two spans.

28
00:01:20,030 --> 00:01:23,210
These are the span tags that we
are going to apply our tooltips to.

29
00:01:23,210 --> 00:01:25,030
Both spans will get the class of tool.

30
00:01:28,390 --> 00:01:32,465
Then, we're going to add a custom data
attribute which we will call data-tip.

31
00:01:32,465 --> 00:01:37,746
And this is where we will add our tool tip

32
00:01:37,746 --> 00:01:43,040
message that we want to see displayed.

33
00:01:43,040 --> 00:01:47,320
I'm going to put in tool tips
are the coolest thing since sliced bread.

34
00:01:51,850 --> 00:01:56,170
Okay, the last thing we are going
to add to each span is a tab index.

35
00:01:58,100 --> 00:02:01,740
This way, if someone is navigating the
page without a mouse, they can still enjoy

36
00:02:01,740 --> 00:02:05,300
our tool tip information by focusing
on our spans by using the tab key.

37
00:02:05,300 --> 00:02:06,210
Now, for the other span.

38
00:02:10,030 --> 00:02:11,210
We will give it a class of tool.

39
00:02:15,690 --> 00:02:17,180
Give it our data trip attribute.

40
00:02:23,240 --> 00:02:31,240
And in here we'll just put seriously,
how awesome are these tool tips?

41
00:02:33,590 --> 00:02:36,100
And finally we'll add a tab index of two.

42
00:02:40,000 --> 00:02:42,150
Let's say that, and that's it.

43
00:02:42,150 --> 00:02:44,020
That is all the extra mark
up that is needed, and

44
00:02:44,020 --> 00:02:47,280
we have two very helpful tips
just waiting to be displayed.

45
00:02:47,280 --> 00:02:50,500
Now that our mark up is done,
we can add our styles.

46
00:02:50,500 --> 00:02:55,503
I'm going to open up tool tip.CSS, which
we already have linked in our index.HTML.

47
00:03:01,360 --> 00:03:04,670
The first thing we want to do is style
our spans that have the tool class.

48
00:03:09,878 --> 00:03:13,040
We will first change our cursor to
help in order to give our tool tip

49
00:03:13,040 --> 00:03:14,545
triggers a visual indicator.

50
00:03:18,295 --> 00:03:21,755
The help value will either add
a pointer with a question mark, or

51
00:03:21,755 --> 00:03:23,110
just the question mark.

52
00:03:24,390 --> 00:03:27,600
Again this is just to
give a visual indicator.

53
00:03:27,600 --> 00:03:29,753
Then we are going to
add position relative.

54
00:03:33,170 --> 00:03:37,378
So our pseudo-elements will be
positioned relative to our span tack.

55
00:03:37,378 --> 00:03:40,701
Next we are going to style our sudo
elements, the actual tooltips,

56
00:03:40,701 --> 00:03:42,860
to look like a speech bubble.

57
00:03:42,860 --> 00:03:47,660
We will be using both the before and
after sudo elements of the tool class.

58
00:03:47,660 --> 00:03:50,960
One will be our speech bubble and
the other will be the pointer arrow.

59
00:03:50,960 --> 00:03:53,760
First, let's write the styles
that apply to both.

60
00:03:53,760 --> 00:04:01,850
We are going to do tool before,
comma, then tool after.

61
00:04:06,720 --> 00:04:09,070
We want them both to be
positioned absolutely and

62
00:04:09,070 --> 00:04:10,480
centered on our tool element.

63
00:04:10,480 --> 00:04:14,420
So let's set position to absolute and
left to 50%.

64
00:04:21,360 --> 00:04:24,312
Since they will only be
visible on hover or focus,

65
00:04:24,312 --> 00:04:28,545
I'm going to set the opacity on both
to zero and the z index to -100.

66
00:04:35,711 --> 00:04:39,364
We want them back and out of the way and
now we have hover and

67
00:04:39,364 --> 00:04:41,470
focus comment styles.

68
00:04:41,470 --> 00:04:45,130
Let's go ahead and write our selectors for
each the before and after for

69
00:04:45,130 --> 00:04:46,045
hover and focus.

70
00:05:05,961 --> 00:05:11,295
And here, we will just bump the opacity
back up to 1 and set our z-index to 100.

71
00:05:18,086 --> 00:05:19,850
And then we're done.

72
00:05:19,850 --> 00:05:23,230
So, that takes care of the hiding and
showing of our tooltips.

73
00:05:23,230 --> 00:05:25,961
Now, lets provide the content and
style each piece.

74
00:05:32,253 --> 00:05:34,710
We are going to start with the arrow tip.

75
00:05:34,710 --> 00:05:39,390
For that we are going to use a border
style CSS trick to create a triangle.

76
00:05:39,390 --> 00:05:41,150
For anyone not familiar with this trick,

77
00:05:41,150 --> 00:05:44,470
I have provided a link in the workshop
notes, where you can read up on it.

78
00:05:45,540 --> 00:05:46,750
It's fairly simple.

79
00:05:46,750 --> 00:05:51,040
By using different size borders and
border colors we can create shapes.

80
00:05:51,040 --> 00:05:53,800
And in this case we will
be creating a triangle.

81
00:05:53,800 --> 00:05:54,800
So let's write our selector.

82
00:05:57,100 --> 00:05:58,920
We'll do the before element first.

83
00:06:03,711 --> 00:06:05,711
We will give it a border style of solid.

84
00:06:11,921 --> 00:06:18,680
For border width, we will give the top 1m,
the sides both .75m, and the bottom zero.

85
00:06:23,830 --> 00:06:26,190
For border color, we'll add gray.

86
00:06:27,290 --> 00:06:30,864
This way the gray color will be
the color of our tool tip and

87
00:06:30,864 --> 00:06:32,961
then make the rest transparent.

88
00:06:35,962 --> 00:06:39,363
I will then position it
100% from the bottom, and

89
00:06:39,363 --> 00:06:42,170
give it a negative point
five m left margin.

90
00:06:56,295 --> 00:06:58,309
And finally for
our suit element to render,

91
00:06:58,309 --> 00:07:01,030
we will have to add the content property.

92
00:07:01,030 --> 00:07:03,730
Since this is just a pointer and
doesn't contain any content,

93
00:07:03,730 --> 00:07:04,750
we will leave that empty.

94
00:07:10,140 --> 00:07:12,530
With the tip done,
we can move on to the speech bubble.

95
00:07:15,090 --> 00:07:19,253
The actual content of the tool tip
will be on the after pseudo element.

96
00:07:25,045 --> 00:07:28,143
Since our before pseudo element
was the tip of our speech bubble,

97
00:07:28,143 --> 00:07:31,340
we will use the after pseudo element for
the bubble itself.

98
00:07:31,340 --> 00:07:35,212
We will first set the background to the
same grey color that we used in the tip.

99
00:07:40,461 --> 00:07:43,171
Then we'll add a border-radius
to round out our bubble

100
00:07:49,461 --> 00:07:52,810
And we'll set that to .25m.

101
00:07:52,810 --> 00:07:57,435
We want this position on top of our
pointer, so we'll set the bottom to 180%.

102
00:08:03,620 --> 00:08:06,730
I'll use the color property to make
the text of the bubble a shade of white.

103
00:08:11,410 --> 00:08:14,710
Let's set the size of our tool tip and
give it some padding.

104
00:08:14,710 --> 00:08:18,128
So, we'll set the width to 17.5m.

105
00:08:21,961 --> 00:08:25,503
And padding of 1m.

106
00:08:25,503 --> 00:08:29,030
Then, we use margin-left
which is half the width.

107
00:08:29,030 --> 00:08:31,295
So, here, we put margin-left.

108
00:08:33,614 --> 00:08:36,870
Negative 8.75m.

109
00:08:36,870 --> 00:08:38,190
Now, for the really cool part.

110
00:08:38,190 --> 00:08:41,753
We're going to use the data tip attribute
as the value of the content property.

111
00:08:43,461 --> 00:08:47,070
You can do that by writing attr for
attribute.

112
00:08:47,070 --> 00:08:50,100
Then the name of
the attribute in parenthesis.

113
00:08:50,100 --> 00:08:55,260
So, in the parenthesis
we'll right data-tip.

114
00:08:55,260 --> 00:08:58,030
This will then set the value of
that attribute as the value of

115
00:08:58,030 --> 00:08:59,090
the content property.

116
00:08:59,090 --> 00:09:00,950
This is cool for a couple reasons.

117
00:09:00,950 --> 00:09:03,850
For one,
it allows us to keep our styles very dry.

118
00:09:03,850 --> 00:09:06,210
We don't have to repeat this
group of declarations for

119
00:09:06,210 --> 00:09:07,990
every single element that gets a tip.

120
00:09:07,990 --> 00:09:11,640
That makes it easier to write and
makes for a smaller file size.

121
00:09:11,640 --> 00:09:15,320
Then secondly, we are able to
keep our content in the HTML.

122
00:09:15,320 --> 00:09:19,710
So if we want to add a tool tip later on,
we only have to edit the HTML file.

123
00:09:19,710 --> 00:09:21,460
No need for additional styles.

124
00:09:21,460 --> 00:09:22,800
Very nice separation.

125
00:09:22,800 --> 00:09:23,880
So that's it.

126
00:09:23,880 --> 00:09:26,770
Let's save this, and you can see,
not very much code at all.

127
00:09:28,010 --> 00:09:29,040
Very simple.

128
00:09:29,040 --> 00:09:31,500
Let's open this up in our browser,
and refresh.

129
00:09:32,960 --> 00:09:34,050
Let's try our tooltips.

130
00:09:36,080 --> 00:09:38,480
Something is definitely wrong here.

131
00:09:38,480 --> 00:09:41,270
The tips are appearing, but
we are unable to see the speech bubble.

132
00:09:42,970 --> 00:09:46,379
Let's go back to the CSS and
look at our hover styles.

133
00:09:50,796 --> 00:09:55,130
And sure enough we have a missing
comma in our selector group.

134
00:09:56,960 --> 00:10:01,240
So we'll save that,
go one more time back to our page.

135
00:10:01,240 --> 00:10:04,840
Refresh, to beautiful tool tips.

136
00:10:04,840 --> 00:10:06,450
And there you go.

137
00:10:06,450 --> 00:10:11,090
We now have this helper cursor, along with
these very nice looking tool tip messages.

138
00:10:11,090 --> 00:10:13,710
So that is the technique,
and this looks great.

139
00:10:13,710 --> 00:10:16,520
But we can do way better than
this abrupt show on hover.

140
00:10:16,520 --> 00:10:20,500
By adding some transforms and transitions,
we can smooth this out a lot.

141
00:10:20,500 --> 00:10:21,760
So lets go and add these.

142
00:10:22,770 --> 00:10:27,495
So, back in tooltip.css, we'll go
down to the before sudo element, and

143
00:10:27,495 --> 00:10:31,253
I'm going to add some transforms,
and some transitions.

144
00:10:40,961 --> 00:10:46,628
I am scaling it down to 0.6 and raising
it by adding translate Y, negative 90%.

145
00:10:54,980 --> 00:10:58,297
I then transition all properties
over .65 seconds, and

146
00:10:58,297 --> 00:11:01,295
then add a little bounce
with a cubic-bezier curve.

147
00:11:21,086 --> 00:11:25,962
I then changed the opacity to transition
after a small delay of half a second.

148
00:11:43,336 --> 00:11:48,700
Next I will add a slightly different
transition for the tip on hover or focus.

149
00:11:48,700 --> 00:11:52,920
Basically just giving it
a transitional delay of .2 seconds.

150
00:11:52,920 --> 00:11:55,920
For our speech bubble,
we will do pretty much the same.

151
00:11:55,920 --> 00:11:58,378
We'll add our transforms and transitions.

152
00:12:13,336 --> 00:12:17,936
Similar to what we did on our tip we
are scaling the bubble down to .6 and

153
00:12:17,936 --> 00:12:20,170
translating on the y axis 50%.

154
00:12:25,503 --> 00:12:31,545
Then we add a nice bouncy transition with
.65 second duration and a .2 second delay.

155
00:12:52,836 --> 00:12:56,753
And we will add a slightly different
transition on hover or focus.

156
00:13:22,086 --> 00:13:26,420
Finally, we must get our tip and
bubble back to the original spot.

157
00:13:26,420 --> 00:13:30,200
So, we will add the transform to
our hover and focus selector group.

158
00:13:33,010 --> 00:13:36,850
So back here we will transform,

159
00:13:39,370 --> 00:13:47,310
bring our scale back to one, and
translate back to zero on the y axis.

160
00:13:49,380 --> 00:13:52,530
We will now save this and
go back to the browser.

161
00:13:53,620 --> 00:13:56,290
Hit refresh and beautiful.

162
00:13:56,290 --> 00:14:00,830
Our tooltips have a nice bouncy
transition when hovered or focused.

163
00:14:00,830 --> 00:14:02,130
So there you have it,

164
00:14:02,130 --> 00:14:05,430
we have just replicated this pattern
without the need for JavaScript.

165
00:14:05,430 --> 00:14:09,690
Once again, flexing our CSS muscles and
getting pretty solid results.

166
00:14:09,690 --> 00:14:13,230
The one thing I really like about this
method over others CSS techniques,

167
00:14:13,230 --> 00:14:17,966
is that our messages in an attribute, as
opposed to a span or some other element.

168
00:14:17,966 --> 00:14:21,370
Tooltips are a bit awkward on smaller
devices, due to the limited screen real

169
00:14:21,370 --> 00:14:24,110
estate, but can make for
a nice enhancement on larger screens.

170
00:14:25,280 --> 00:14:29,047
With our tooltip message in an attribute,
there are no extra elements to render,

171
00:14:29,047 --> 00:14:31,461
no elements to hide,
no need to set display to none.

172
00:14:31,461 --> 00:14:33,431
When our screen is large enough, then and

173
00:14:33,431 --> 00:14:36,660
only then will the content be
generated and added to our page.

174
00:14:36,660 --> 00:14:38,360
I think that is pretty cool.

175
00:14:38,360 --> 00:14:41,220
And again, we are keeping our markup and
content in the HTML,

176
00:14:41,220 --> 00:14:43,830
which makes these files modular and
portable.

177
00:14:43,830 --> 00:14:45,820
And that is definitely cool.

178
00:14:45,820 --> 00:14:47,520
Anyways, that's it for this workshop.

179
00:14:47,520 --> 00:14:49,210
I'm Dave Conner, and
I'll see you next time.

180
00:14:49,210 --> 00:14:49,850
Thanks for watching.