Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Create Tooltips with CSS!
You have completed Create Tooltips with CSS!
Preview
Tooltips are a great way to provide additional information to your users. This pure CSS technique that we are about to learn employs both pseudo-elements and custom data- attributes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi everybody.
0:04
I'm Dave Conner, a web designer and
front end developer.
0:05
In this Treehouse Workshop we're gonna
learn how to create helper tooltips using
0:08
nothing more than HTML and CSS.
0:12
Tooltips are a great way to provide
additional information to your users.
0:15
They're a common design pattern and can
be found in many of the popular front end
0:18
frameworks, like Bootstrap or Foundation.
0:22
Both of these frameworks use
JavaScript to handle frameworks.
0:25
But as you'll soon see,
0:28
it's actually very easy to create
this effect using CSS alone.
0:29
The technique that we're about to
learn employs both pseudo-elements and
0:33
custom data attributes.
0:36
The data attribute will store our
tooltip message in the HTML and
0:37
the value of that will display
as the tooltip content.
0:41
Let's get started and
we can see it in action.
0:44
As you can see, we have a simple web page.
0:47
It has some basic styling applied,
which you can find in style CSS.
0:49
Nothing too major just some
boiler play code for the demo.
0:53
Right now we have no tooltips.
0:56
If you were to open this
up in a browser you can see
0:59
there is nothing here when
we have over the text.
1:01
We are going to add our tool tips to
the two span elements that we have
1:04
here in green.
1:07
Let's open up index.html and
write the extra markup data needed.
1:08
Looking at the HTML, you see we have a div
that contains a headline and a p tag.
1:12
Inside the p tag, we have two spans.
1:17
These are the span tags that we
are going to apply our tooltips to.
1:20
Both spans will get the class of tool.
1:23
Then, we're going to add a custom data
attribute which we will call data-tip.
1:28
And this is where we will add our tool tip
1:32
message that we want to see displayed.
1:37
I'm going to put in tool tips
are the coolest thing since sliced bread.
1:43
Okay, the last thing we are going
to add to each span is a tab index.
1:51
This way, if someone is navigating the
page without a mouse, they can still enjoy
1:58
our tool tip information by focusing
on our spans by using the tab key.
2:01
Now, for the other span.
2:05
We will give it a class of tool.
2:10
Give it our data trip attribute.
2:15
And in here we'll just put seriously,
how awesome are these tool tips?
2:23
And finally we'll add a tab index of two.
2:33
Let's say that, and that's it.
2:40
That is all the extra mark
up that is needed, and
2:42
we have two very helpful tips
just waiting to be displayed.
2:44
Now that our mark up is done,
we can add our styles.
2:47
I'm going to open up tool tip.CSS, which
we already have linked in our index.HTML.
2:50
The first thing we want to do is style
our spans that have the tool class.
3:01
We will first change our cursor to
help in order to give our tool tip
3:09
triggers a visual indicator.
3:13
The help value will either add
a pointer with a question mark, or
3:18
just the question mark.
3:21
Again this is just to
give a visual indicator.
3:24
Then we are going to
add position relative.
3:27
So our pseudo-elements will be
positioned relative to our span tack.
3:33
Next we are going to style our sudo
elements, the actual tooltips,
3:37
to look like a speech bubble.
3:40
We will be using both the before and
after sudo elements of the tool class.
3:42
One will be our speech bubble and
the other will be the pointer arrow.
3:47
First, let's write the styles
that apply to both.
3:50
We are going to do tool before,
comma, then tool after.
3:53
We want them both to be
positioned absolutely and
4:06
centered on our tool element.
4:09
So let's set position to absolute and
left to 50%.
4:10
Since they will only be
visible on hover or focus,
4:21
I'm going to set the opacity on both
to zero and the z index to -100.
4:24
We want them back and out of the way and
now we have hover and
4:35
focus comment styles.
4:39
Let's go ahead and write our selectors for
each the before and after for
4:41
hover and focus.
4:45
And here, we will just bump the opacity
back up to 1 and set our z-index to 100.
5:05
And then we're done.
5:18
So, that takes care of the hiding and
showing of our tooltips.
5:19
Now, lets provide the content and
style each piece.
5:23
We are going to start with the arrow tip.
5:32
For that we are going to use a border
style CSS trick to create a triangle.
5:34
For anyone not familiar with this trick,
5:39
I have provided a link in the workshop
notes, where you can read up on it.
5:41
It's fairly simple.
5:45
By using different size borders and
border colors we can create shapes.
5:46
And in this case we will
be creating a triangle.
5:51
So let's write our selector.
5:53
We'll do the before element first.
5:57
We will give it a border style of solid.
6:03
For border width, we will give the top 1m,
the sides both .75m, and the bottom zero.
6:11
For border color, we'll add gray.
6:23
This way the gray color will be
the color of our tool tip and
6:27
then make the rest transparent.
6:30
I will then position it
100% from the bottom, and
6:35
give it a negative point
five m left margin.
6:39
And finally for
our suit element to render,
6:56
we will have to add the content property.
6:58
Since this is just a pointer and
doesn't contain any content,
7:01
we will leave that empty.
7:03
With the tip done,
we can move on to the speech bubble.
7:10
The actual content of the tool tip
will be on the after pseudo element.
7:15
Since our before pseudo element
was the tip of our speech bubble,
7:25
we will use the after pseudo element for
the bubble itself.
7:28
We will first set the background to the
same grey color that we used in the tip.
7:31
Then we'll add a border-radius
to round out our bubble
7:40
And we'll set that to .25m.
7:49
We want this position on top of our
pointer, so we'll set the bottom to 180%.
7:52
I'll use the color property to make
the text of the bubble a shade of white.
8:03
Let's set the size of our tool tip and
give it some padding.
8:11
So, we'll set the width to 17.5m.
8:14
And padding of 1m.
8:21
Then, we use margin-left
which is half the width.
8:25
So, here, we put margin-left.
8:29
Negative 8.75m.
8:33
Now, for the really cool part.
8:36
We're going to use the data tip attribute
as the value of the content property.
8:38
You can do that by writing attr for
attribute.
8:43
Then the name of
the attribute in parenthesis.
8:47
So, in the parenthesis
we'll right data-tip.
8:50
This will then set the value of
that attribute as the value of
8:55
the content property.
8:58
This is cool for a couple reasons.
8:59
For one,
it allows us to keep our styles very dry.
9:00
We don't have to repeat this
group of declarations for
9:03
every single element that gets a tip.
9:06
That makes it easier to write and
makes for a smaller file size.
9:07
Then secondly, we are able to
keep our content in the HTML.
9:11
So if we want to add a tool tip later on,
we only have to edit the HTML file.
9:15
No need for additional styles.
9:19
Very nice separation.
9:21
So that's it.
9:22
Let's save this, and you can see,
not very much code at all.
9:23
Very simple.
9:28
Let's open this up in our browser,
and refresh.
9:29
Let's try our tooltips.
9:32
Something is definitely wrong here.
9:36
The tips are appearing, but
we are unable to see the speech bubble.
9:38
Let's go back to the CSS and
look at our hover styles.
9:42
And sure enough we have a missing
comma in our selector group.
9:50
So we'll save that,
go one more time back to our page.
9:56
Refresh, to beautiful tool tips.
10:01
And there you go.
10:04
We now have this helper cursor, along with
these very nice looking tool tip messages.
10:06
So that is the technique,
and this looks great.
10:11
But we can do way better than
this abrupt show on hover.
10:13
By adding some transforms and transitions,
we can smooth this out a lot.
10:16
So lets go and add these.
10:20
So, back in tooltip.css, we'll go
down to the before sudo element, and
10:22
I'm going to add some transforms,
and some transitions.
10:27
I am scaling it down to 0.6 and raising
it by adding translate Y, negative 90%.
10:40
I then transition all properties
over .65 seconds, and
10:54
then add a little bounce
with a cubic-bezier curve.
10:58
I then changed the opacity to transition
after a small delay of half a second.
11:21
Next I will add a slightly different
transition for the tip on hover or focus.
11:43
Basically just giving it
a transitional delay of .2 seconds.
11:48
For our speech bubble,
we will do pretty much the same.
11:52
We'll add our transforms and transitions.
11:55
Similar to what we did on our tip we
are scaling the bubble down to .6 and
12:13
translating on the y axis 50%.
12:17
Then we add a nice bouncy transition with
.65 second duration and a .2 second delay.
12:25
And we will add a slightly different
transition on hover or focus.
12:52
Finally, we must get our tip and
bubble back to the original spot.
13:22
So, we will add the transform to
our hover and focus selector group.
13:26
So back here we will transform,
13:33
bring our scale back to one, and
translate back to zero on the y axis.
13:39
We will now save this and
go back to the browser.
13:49
Hit refresh and beautiful.
13:53
Our tooltips have a nice bouncy
transition when hovered or focused.
13:56
So there you have it,
14:00
we have just replicated this pattern
without the need for JavaScript.
14:02
Once again, flexing our CSS muscles and
getting pretty solid results.
14:05
The one thing I really like about this
method over others CSS techniques,
14:09
is that our messages in an attribute, as
opposed to a span or some other element.
14:13
Tooltips are a bit awkward on smaller
devices, due to the limited screen real
14:17
estate, but can make for
a nice enhancement on larger screens.
14:21
With our tooltip message in an attribute,
there are no extra elements to render,
14:25
no elements to hide,
no need to set display to none.
14:29
When our screen is large enough, then and
14:31
only then will the content be
generated and added to our page.
14:33
I think that is pretty cool.
14:36
And again, we are keeping our markup and
content in the HTML,
14:38
which makes these files modular and
portable.
14:41
And that is definitely cool.
14:43
Anyways, that's it for this workshop.
14:45
I'm Dave Conner, and
I'll see you next time.
14:47
Thanks for watching.
14:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up