hello everybody welcome back to css3 in
30 days today is day 18 and we're going
to be coding up some css3 tooltips let
me show you what that looks like right
here in the browser we have the final
result down here and the tooltip is
essentially a little element that just
appears in some position around the
element to let you know a little bit
more information the purpose of a
tooltip is not to look fancy but
specifically to help the user understand
something about what they are
interacting with so from a usability
standpoint let's say this little pink
box i have here
is an acronym
and you want to be able to let them know
what that acronym stands for when you
hover over it maybe the tooltip lets
them know what it stands for or maybe
there is an element a call to action
where if you hover over it it lets them
know additional information to help them
understand how to interact with that
element a little bit better there's an
endless amount of reasons why you might
want a tooltip but the purpose of this
lesson is not necessarily to show you
the why of the tooltip rather the how to
make a tooltip so let's jump in and
start making tool tips so in this final
result i'm just going to show you what
we're going to make we've got this top
tool tip this right tool tip bottom tool
tip and left tool tip
all we're going to do is we're going to
coat up these these little elements
it's just something to hover over and
then we're going to make a global
tooltip style and then we're going to
start positioning them depending on
where you hover all in css that's the
exciting part about this a lot of the
times tool tips are made using
javascript or jquery but in this case
just css3 because that's how we roll in
css3 in 30 days over here in the code
editor we have our 18 tool tips take a
moment to go and download that and open
up your index and sandbox final.css is
always there for your reference as you
go along if you mess something up or if
you're confused about something that
should help you out otherwise let's get
started here in the index i'm going to
show you what the markup looks like
because it is a little bit important
because we're going to be styling it so
in the sandbox here we have just some
divs and the div they all have the class
of tool tip and then the position of
where it will be so the class is simply
top right bottom and left they all have
the class of tool tip
the other thing is there is a title
attribute with some text i've just said
to tooltip on top right and so on and so
forth and that is really it for the
markup
in the sandbox we're going to get
started and we're going to style
our tool tip element itself so the the
the target that we want to hover over so
we're going to
select tool tip and then we're just
going to say position relative this is
important because we're going to be
positioning that tool tip itself so
right now we're positioning the parent
element that we call tooltip but it has
to have a position of relative or
absolute whichever one you choose in
this case we're going to use relative so
it doesn't move around in weird places
and
that's simply so that when we position
the tooltip itself using the before and
after
virtual elements we need to have it stay
contained within its parent so position
relative is very important in this case
height 60 pixels again this is just the
target we're going to hover over i'm
just jamming here 250 pixels background
we're going to use that
the pink color that branded pink that's
f2395a whatever color you want it really
doesn't matter this isn't functionality
this is just some
this is just vanity styles here text
align center we're going to line height
the text in the center of it
to 60 pixels which is going to be the
same as the height so it's vertically
aligned as well as center aligned
because of text align center font size
something large and readable 18 pixels
margin zero auto and that's how you
style a target element boom just like
that
nice okay let's go back to the
uh
the sandbox here
and let's get coding up the tool tip
itself so we're going to just say tool
tip but we're going to actually select
the before pseudo element this whole
time i've been calling them virtual
elements
i think i made that up
maybe i didn't
but the idea is that it is a
pseudo element it's not a real element
it's kind of an element that doesn't
really appear unless you make it do
something so it's just a funky little uh
css trick again i've been calling them
virtual elements this this whole time
and i think i made that up but we still
got the job done right brad
right brad
position we're going to position
absolute because we want to move that
around freely outside of the flow we
don't really want position relative to
be messing with it so position
absolute's going to give us more
flexibility
z index 2 just a little bit above the
default which tool tip will be at zero
and then this one will bring it up just
a little bit
we don't want it to be behind its parent
element display
none by default width 200 pixels padding
10 pixels
so something nice and simple font size
i'm going to go 0.8 that's eighty
percent of the
parent elements font size which is
eighteen pixels so eighty percent of the
uh eighty percent of that whatever
whatever that number is
line height one point four m
let's try that and border radius
we're going to say 5 pixels slightly
rounded
background color we're going to go with
an rgba something you could see through
simply a 0 0 0 and 0.8
so it's black but 80 alpha channel so a
little bit transparent
color white that's the text the content
this is cool content used with the
before and after pseudo elements to
generate content specific text within an
element so we've been using this a lot
uh in this way but they're actually
gonna this means you can actually put
text within the element we're just
putting an empty string because uh it
allows that after element to appear so
we still need to have content within the
pseudo-element but we're actually going
to have it display real content this
time not just an empty string so we're
just going to do something fun here so
instead of an empty string we're
actually going to use
attribute value
that says attribute value for the
content property so this is specific a
specific value for this property which
means we have access to
within this parentheses
a specific attribute within the html so
we want to grab the title that title we
specifically put in the html will say
tooltip on the right tooltip on the
bottom so on and so forth so that is
cool dynamic it's not just hard-coded so
this will depend on whatever the title
is of that element really exciting stuff
i'm so pumped okay
we're gonna now select tool tip
after pseudo element
and now before we get move forward let's
actually just see if this did anything
so i'm going to move over to the browser
and it doesn't do anything because we
haven't
done any styles upon hover so we're
going to work on that
let me actually let's just do that now
so we can
so we can make it appear so tool tip
hover
and then the before so how that works is
the tool tip
uh the tooltip element when we hover
over the tooltip element
do something with the before
pseudo element so it's a kind of an
interesting little selector so display
inline block
watch this
save that
now when i hover
nothing happens exactly what i wanted
now you might be wondering why that
little thing pops up when you say that's
just the title attribute appearing by
default the browser's native uh
functionality it shows uh the title just
for accessibility but we actually want
to make our own so back to the original
problem we don't see it i'm thinking
that's because
okay super silly just realized this i
was uh styling here's the problem maybe
you noticed this and you were just
shaking your head wondering when i was
gonna catch it i styled tool tip after
pseudo element i meant to style these
tool tip before pseudo element and then
down here i set on hover show the before
element which we haven't done anything
with so let's change that to before
and top i'm going to take that out
because i'm actually going to use that
save that and then on hover that should
work let's see what happens here
there it is okay so the tooltip on top
appears there it's at the very it's
somewhere in the top right i don't
really know what's going on with its
position
so we need to fix that plus we need to
do one little thing i want to show a
little arrow pointing towards
the element itself so down here in the
final example i want it to look like
that it has a little arrow so i'm going
to create that little arrow
with the after pseudo element which i
was accidentally styling this whole time
so that's going to be like this position
absolute z index we're going to say 1
it's going to be above the parent but
behind the
little tool tip itself
and then i'm going to say display none
again by default we don't want to see it
width 0
height 0 and this is because we're going
to make it we're going to make a
triangle out of a border like we did
with pac-man just recently here so we're
going to say border 5 pixels solid
transparent so we don't see any of the
border
and then a little bit later here i'm
going to create and display one side of
it so let's just leave it at that and
then we're gonna say content empty
string so that
will create an element that we still
won't see and we're gonna do something
with in a sec so let's position that
let's um
let's say
we're gonna go bottom
zero no one hundred percent so the very
bottom of the element
left
fifty percent
border
top color
let's do the same color as the tooltip 0
0 0 0.5 0.8
rgba let's say that and see what just
happened
okay so i don't see it
and that is because
we're actually on hover up here where
are we right here
we need to make the after pseudo element
appear on hover as well tool tip hover
after
so save that but i'm going to put this
style
after
that hover
simply because it's cascading i don't
want the this style to be before this
just in case there's some sort of
problem okay so something is happening
here so when i hover now you can see the
arrow it's the right shape shape and
size but it's in the wrong
spot so we need to move that in the
right spot so what do we got to do to do
that
it has to be in the center of this
element
let's start by centering the tool tip
itself because it's obviously in the
wrong spot it needs to be
centered and then above the element so
let's go ahead and do that let's go back
to the tool tip
top before
and what we're going to do
is we're going to position it now and so
we're going to say bottom
now if i just said bottom 100
what's going to happen it's going to
move it up but i want to add another 5
pixels to that so because the
the
the size of that arrow is 5 pixels
because we said in our border 5 pixels
so we want it to be 100 from the bottom
but then another 5 pixels now we can't
find out that we can't create that with
a percentage
but i also want to have a dynamic
tool tip position from the bottom
because that element could be any size
if i want to add a tooltip to any
element not just a specific
hard-coded height so it needs to be 100
from the bottom but it needs to have an
additional five pixels and the way we
can
combine
a percentage and a pixel
value is through the calc css function
so check this out
let's go back to our css
i'm going to wrap this in the calc
function
like this
but i'm going to say plus
5 pixels that allows us to combine
different values different measurements
now watch this
100 plus 5 pixels that's amazing how
cool is that so now we need to fix that
needs to move it over so let me let me
do another thing here we're going to
we got to move it left let's say
left 50
save that let's see what happens okay so
now we're 50 over now we're starting to
look good 50 over from the left side of
the parent element as you can see as
well as the little arrow is it's in the
bottom left-hand corner of the tooltip
but we need to fix that we need to move
it back over so
how we do that is through a we could
just simply say margin left you know
you know
negative whatever the width is
of the element
but i want to use
transform
the reason why is because
this is kind of an animated element it's
kind of appearing uh you know through a
fade and i just want to wanted to use
this as an example i could just use the
margin left or positioning but here's
the deal there i found a really cool
article about the
specifically what i'm going to do is
this and i'll tell you exactly why so
translate
x
so translate the value for the transform
property on the x axis
which means
horizontally so i'm going to say
negative 50 now let me show you what it
happens and then we're going to go from
there so now we're perfectly in the
center
so i moved it negative 50 of its width
over so that it is perfectly in the
center the reason why i used transform
translate is because this article
is a great article
i have a link in the final code in the
in this in line 58 of the final css with
the link to this article it's basically
i wanted to know okay why would you want
to use translate
versus an absolute position or
you know using a margin where you can
you know negative
the amount so it's centered which we've
done before
well he basically says
don't confuse positioning with design
emotion so
here's an example when you use an
element that has an absolute position or
a margin you know
negative pixel position it's going the
browser is going to render that
animation if you're moving it at all
pixel by pixel so this is cool so in the
animation if you were to view the source
code and you animated it into that
position
it's going to go
pixel it's going to 2 pixels 3 pixels 4
pixels until it goes from whatever
whatever starting pixel to the end pixel
pixel by pixel so technically that's
pretty choppy especially if you had a
really good um
retina screen where you can see
the little fine details but
that's not the best practice how do you
do it so it's more smooth so it renders
a bit more smooth well you use translate
the transform translate where the
browser does something like this it
renders that animation way smoother so
it goes
in increments so you can see it goes
from the starting of zero let's say and
the final the final pixel that you end
on is one pixel it doesn't just go zero
to one it goes
0.1.2.3.4.5 all the way up to your final
position
so that it's a really smooth animation
so
the way arthur i believe is the author
here he says don't confuse positioning
so i'm moving an element in a specific
and static and hard-coded place
with design emotion
so possibly i'm thinking here maybe our
pac-man instead of using uh you know the
moving the pixels across the screen
maybe i would have used transform
translate x
to move him across the screen that might
be something that you might want to
revisit to see if we can improve that
instead of using
absolute positioning
using transform translate
so my little rant on
why
you would use transform translate i'm
simply positioning it in an area but
because
it's gonna be fading in and because you
could have it slide up or slide down
into position using the transform
property is a nicer way of handling its
position because it's a bit more dynamic
hopefully that makes sense and i didn't
go off on a tangent for no reason
whatsoever okay so
now we've got our tool tip in the right
position we want that
little arrow to be in the right position
so
let's find the tooltip after
uh and just for consistency i'm gonna
move this hover
above these styles
like so
and then down here we're gonna start
styling the after so what happens
uh let me see i'm going to move down a
couple
and we said bottom 100 percent and left
50
so that's good but what we actually need
to do now is
if you can see it needs to be centered
properly it's not actually in the center
of the tooltip so let's try that
transform
translate x again and then say negative
50 and i'll see what it does to it
so now it is actually perfectly centered
this is the same width on the left as it
is on the right
perfect but it's not below
the tooltip we want to be able to see
that and that's because
let's see if i can do this this is the
top border of an element
of a five pixel border
and so there are three other sides that
you can't see so we just need to make
the border bottom with zero
so that should jump that whole element
down so let's try that so we're going to
say border bottom width
0. now i could have just used position
bottom 100 calc and then extra 5 pixels
but i just want to make it easy instead
of doing anything else and just say
border bottom with 0. so now the border
top width is 5 pixels the border bottom
width is nothing so that should collapse
it down below the tool tip let's see
just like i said it would do so that now
means that the border bottom of that
element is zero you can't it's nothing
there taking up space and it jumps that
arrow down so that it's just
touching the tooltip on the top so there
is our top
tool tip
that's
it for that that style right there so
now all of them have these styles
so that's a little bit of a problem
because
they need to be a bit more specific so
the styles i just styled were for all
the tool tips so maybe we'll go back
into our css here
and what we're going to do is revisit
here so the tooltip hover it's going to
display all the tool tips on hover we
want that but now what we want
for
for the tool tip top so we want all the
tool tips to have these styles
but this style is specific to the tool
tip top so i'm gonna i'm gonna
cut that out
and what i'm gonna do
is this so i'm going to actually go
down to the bottom
and i'm going to say
tool tip and then i'm going to combine
that with the class of top
and then
the after
pseudo element
i believe it was before actually was the
style we were going for yes so that is
the tooltip itself the position of the
top tool tip save that
okay perfect so now these ones are
broken because i'm not selecting them
anymore that is more of what we wanted
but we also did the after the position
of that arrow is wrong so we need to
specifically take yes so we're going to
take all these styles because that's
specific to where it's going to be
positioned so now this is just styling
all the all of those elements
as a as in terms of its look and feel
but the position of it we want to be
very specific so now down here
i'm going to say
tool tip
top and then the after pseudo element i
add these styles so now let's try that
tooltip top works great these ones are
broken beautiful okay so a quick review
we have the tooltip
global style just for that pink uh
element
we have the
when you hover the before and after
elements will appear
um we'll get a display of inline block
the default tool tip before styles in
fact why don't we just move these up
reorganizing my code a little bit here
so tool tip and then toolpit tooltip
after
and tilt it before okay so we've got
those three things
and then we have tool tip hover before
and after then we have tool tip top
before
that's position to get that
in the top center position above the the
pink element and then tool to top after
which is the little arrow in the bottom
in the center that is good so moving on
that was the
was the bulk of the work i think
because now what we're going to be doing
is just positioning
the
we already styled up the tool tip now we
just need to position them so that
whoops so that the tooltip is on the
other right bottom or left and the
arrows are in the
their respective positions
so rolling up our sleeves here we're
going to get started
let's go down here below tooltip top
after give a little bit of space and now
what we're going to do is we're going to
be styling the tool tip
let's do the one on the
the right that's the next one
tool tip
right so those are connected that's a
very specific selector i'm selecting the
classic tool tip that also has the class
of right
and
before pseudo element now we're going to
do is we're going to say top
50
because it needs to be in the center
of the element so if we look over here
we need that to be
centered in
vertically
so let's go back here and we're going to
say
left
here's what we're going to do so we're
going to say left we're going to go calc
again the calc function 100 from the
left now let's see what's going on here
if i save that check it out it's going
to be all the way over there
the problem here is a couple things
it's um we need to have some space
for the arrow
on that
in between the two elements so we're
gonna do the calc 100
plus five pixels that will give us that
space
perfect and the other problem is
the
vertical on the y axis
the that tool tip on the right is just
centered from the top we need to be
centered from the
the middle of the element that makes
sense so we're also going to go
transform
translate y so it's on the y axis
negative fifty percent save that check
it out so now we're in the right spot
now we need to get that arrow
and we need to make that appear properly
so now we're going to style tooltip
with the class of right and the after
pseudo element
we're going to say border
right
color
whoops
is
rgba
i don't want to type all this out so i'm
going to copy that the rgb
zero point ba000.8
and then the border
uh we're gonna say top
fifty percent so we want it to be down
fifty percent and then left one hundred
percent so
uh let's let's see what that does okay
so from the left it's 100
because the parent element is here
so left 100 i believe that's the case
yep
well let's see if i just left zero we'll
see what happens
yeah so see how it's over here
now what the other thing is do you see
how there's a little bit of space how
it's not actually connected to the left
side of the element that's because the
other three sides of the border one
two
and three are invisible they're
transparent but the width is still there
so i want the left width of the border
to be zero
so let's do that right now we're going
to say
border left
width
zero
now check it out now we're right at this
the left side now we need to position
that to be left 100 like we're
originally doing
but the problem here is it's not
actually aligned in the center of that
tool tip and we're going to fix that
with the transform property transform
and we're going to say translate
y and you guessed it negative 50
and that is going to
do the trick i believe
there it is so the tooltip on the right
is done so now we should be able to zip
through that was only about three
minutes to code that up now our bottom
and left should be super
easy
so let's uh jump down to our bottom so
now
a little bit of space i'm just gonna
space these out a little bit
so it's easier to find them
good organization so now we're going to
style up that bottom so we're going to
go tool tip that also has the class of
bottom
and the before pseudo element the top
we're going to need to let's see look at
here so in the bottom it needs to be 100
down from the top
so top will be
calc we're going to do calc again 100
plus the 5 pixels for that little arrow
now we're going to do is we're going to
go left 50 because we want to be to be
centered
but that's going to create a problem
again check it out it's going to be left
from the left side we need to to take
off half of the of the width so it's
center so we're going to use that
transform
and we're going to use uh
translate on the x-axis translate x and
then that's going to be negative 50
percent save that that should get us in
the center looking very nice now we just
need to position
that
after
pseudo-element tooltip bottom after okay
top 100
left fifty percent we're gonna go border
bottom color because we want it to
appear now rgba zero zero zero zero
point eight
save that let's see what we got
so i can see it there it's right there
but it's not centered in the middle of
the tooltip and it needs to be up 5
pixels so maybe you guessed it border
top
width 0
and transform
translate x negative 50 percent save
that refresh
tooltip on the bottom that's looking
nice and last but not least tool tip
on the left so we're going to give a
little bit of space in between here
we're going to say tooltip
also with the class of left and the
before pseudo-element this is kind of
like
repetition now at this point you might
even be able to do this by yourself i
challenge you in fact to pause the video
what keep me in this frame right here
that one and code this one up yourself
and then hit play see if you got it
right so here we are you've paused the
video
and
uh you've coded it up and you're gonna
see if you got this right now keep in
mind there's multiple ways of doing
getting to the same end result but
here's how i'm going to code it up and
let's see how close you were i'm going
to say top 50
right it needs to be 100 but i need to
calculate that with a pixel width so 100
from the right plus
five pixels to account for that little
arrow
transform we're going to trans translate
that on the y-axis
and we're gonna go negative fifty
percent let's check it out
that's looking nice and now here we go
we're just gonna simply say
tooltip
uh with the class of left and after
we're gonna say top 50
left nope that's not right right 100 now
we're gonna go border left color because
we want the left arrow to appear
and we're gonna say border
right
width zero so there's no
conflict with the size there transform
translate on the
y-axis it's gonna be negative fifty
percent save that boom i think we just
nailed it so if that's what your code
looks like or something like that
good job you got the hang of it that's
it for tool tips we got tool tip on the
top right bottom and left
purely css3
that's awesome it's really lightweight
when you do that in css3 we did a couple
new things we played around with the
transform property which we learned a
little bit about why you might want to
do that particularly with animations a
little challenge for you here if you
want because right now these tooltips
are just appearing on hover
now we've played around with some
animations thus far in this css3 in 30
days and we
uh you should know or maybe you should
be able to figure out how to when you
hover make the tooltips
fade in or maybe
you know
slide in slide down or slide over play
around with it and see what you come up
with i challenge you to make these
tooltips a little bit more animated and
keep in mind the transform and translate
style that we learned about positioning
and moving things using that where it
incrementally moves into the position
rather than uses a hard-coded position
absolutely positioned property where
it's only
clunking over pixel by pixel
keep that in mind but a simple challenge
for you is to make these
tooltips fade in on hover and play with
it from there i hope you enjoyed today's
lesson hope it gave you a few ideas for
your own website's applications and all
of that have a good day i'll see you
tomorrow and day number
19. diese nueve adios
[Music]