- [Chris] Hi, this is Chris Converse,
and in this episode, we'll create some tool tips
that are powered completely with HTML and CSS,
and the best part is, they'll work with
both click and touch events.
So if you'd like to follow along with me,
download the exercise files, and let's begin
by opening index.html in a text editor.
And then, once you have the HTML file open,
you'll see that, inside of here,
we have a header and an article element.
I also have two comments here.
This has the content for the tool tips,
so we don't have to type all this.
And if you'd like to see the layout we're working with,
you can open the index.html file up in a browser.
And now, back in the HTML file,
the first thing we'll do is add the necessary HTML
so we can add a tool tip.
So let's find the first word we're going to create
a tool tip for, which will be this word here, patisserie.
So what I'm going to do is get
my cursor before the letter P.
I'm going to put this on its own line.
And then, after the E, let's hit a few returns,
so that we have the word patisserie on its own line.
Now, the browser doesn't mind that
we have spaces in the HTML.
It doesn't render more than one space at a time.
But this will give us the ability to add
the necessary HTML and be able see what we're doing.
And the first thing we'll do is come in here
and add a label around our word.
So, less than sign, type in the word label.
Let's end the tag.
Let's get our cursor after our word.
And let's end the element.
Now let's come back here inside of the tag.
Let's add a class.
So, class equals tooltip.
Now let's get our cursor after the word patisserie,
but before the ending label element.
Let's hit a few returns.
And inside of here, let's add an input field.
So we'll type input, a space.
We'll set the type to a checkbox.
So this is an HTML form element,
and checkboxes have the ability to be checked or unchecked,
and the browser will take care of this,
and it's this particular item that we're going to lock onto
to show and hide our content.
So, next, let's hit another return.
Let's add a span element inside of here.
So, begin the tag, end the tag.
Inside of this span, we're going to put the content.
So let's scroll up here in the HTML.
Here's the HTML comment for patisserie.
Let's come in here and copy all of this content.
And down here inside of this span, let's paste it.
Now, at this point, save your HTML,
and if you go back to the browser,
you'll now see we have this checkbox showing up here.
And we can also see, after the word,
we have our entire description showing up here.
So at this point, let's come back to our exercise files.
Let's open styles.css in our text editor.
Let's scroll down and let's start
adding some style to this new HTML.
So the first thing we'll do is
we'll type label.tooltip.
Put in our brackets.
And the first property we'll set will be position.
We're going to set this to relative.
Because we're going to be positioning
a span element inside of the label element,
we want to make sure that the span
positions in relation to this label.
Then, in the next line, let's indicate to our users
that these are tool tips.
So we'll use a dotted purple line.
So we'll type border-bottom, then a colon and space.
We'll set two pixels for the size.
For the style, we'll set dotted.
And for the color, we'll choose
9a for red, 01 for green, and 56 for blue.
And on the next line, we'll set the type color.
So, color, colon, space.
Let's come up here and copy the color
we just set to the border bottom.
Paste that down here, hit a semicolon.
So, next, let's target the cursor.
So on the next line, we'll set cursor, set to help.
And now, if we check our progress in a browser,
we can see all of the styles taking effect,
and if we hover over this, we'll see the help cursor.
So now, we're going to style the content of the tool tip.
So, back in the CSS, we'll add another rule, label.tooltip,
space, span.
Put in our brackets.
The first property we're going to set is going to be the width.
We're going to set this to 120 pixels.
Next, we'll set the font size.
We'll set this to 0.9ems.
Next, we'll set the line height.
We're going to set this to 1.2ems.
Next, we'll set the background color.
And we'll set the hex value to 63 for red,
0c for green, and 3c for blue.
Next, we'll set the color of the type.
We'll set this to white, so, a pound sign and three Fs.
We'll set text-align to center.
Let me scroll up here a little bit.
Next line, we're going to set padding.
And we'll set the padding to
eight pixels on the top and bottom,
and 20 pixels on the right and left.
And then, next, we'll set border radius.
And we're going to set this to 20 pixels.
And so, now with these visual properties in place,
now we're going to set some of the positioning properties.
So, the first thing we'll do is set
the display type to a block.
Then, on the next line, we're going to set
a position property to absolute.
And then, finally, for the bottom property,
we're going to set this to 90%.
This way, the bottom of the span element
will be at 90% of the height
of the label element that it's inside of.
And then, finally, we're going to set
a left property to negative 30 pixels.
And so, now if we previewed this in a browser,
we can now see this span has our rounded corners,
our background color, in white type,
and it's being positioned, again, with its bottom edge,
at 90% of the height of the label,
which positions the entire span above the word.
Now, you might need to make some adjustments
based on your layout, both for the width
and the positioning of the individual tool tips,
to make sure that your tool tips
don't fall off the edge of the screen.
And at this point, we just have one more thing to do,
which is to make this interactive.
So let's go back to our CSS.
In the rule we just created,
let's change display block to display none.
So that will now hide the span element in the browser.
And now, in the next rule, we're going to make use
of the adjacent sibling selector.
So, to visually illustrate what this does,
the adjacent sibling selector
selects any element that comes after the selected item.
So the span that appears after
the checked input item is what is selected.
And in this case, we're going to set the display.
So the span that appears after the checked input item
is what will be selected, and when this is case,
will reset the display type.
So, back in our CSS file, we'll target label.tooltip,
then a space.
We'll target the input device.
Then we'll type colon, checked.
We're going to see if the checkbox
is actually in a checked state.
Then a space.
Then we'll put a tilde, which is
the sibling adjacent selector.
Then a space, then the word span.
So, again, we're targeting the span element
if it comes after an input item
that's in its checked state.
And if that's the case, we're going to come in here
and set the display type to block.
So with that in place, save your CSS.
Let's go back to the browser.
Let's come over here and click on
either the label or the checkbox.
This puts the input in its checked state,
and will then show the span.
And then, if you click again on the checkbox,
the label, or the span, this will uncheck the checkbox,
and then hide the span.
And so, at this point, the last thing
we need to do is hide the input field.
So let's go back to our CSS.
Let's add one more rule.
So we'll type label.tooltip.
Space, input.
Put in our brackets, set our display type to none.
Save your work, go back to the browser, hit reload,
and now you'll simply see the word
that acts as a tool tip.
The input field is there, and is being set
to either checked or not, but it's not visible to the user.
Now, with these CSS rules in place,
you can now add as many tool tips
to your webpage as you want.
And each one will function independently.
So now, each tool tip does require a bit of extra HTML,
and you could lessen the amount of initial HTML required
by injecting the extra HTML using JavaScript.
And if this sounds interesting,
we do have two courses here that demonstrate
how to dynamically change the HTML
in a page with JavaScript.
You can watch chapter one of
Creating Expandable Panels with jQuery,
or chapter two of Creating a Responsive Homepage Marquee.
Both are available here in the library.
And so, with that, I'll conclude this episode,
and as always, thanks for watching.