Welcome to our lesson, where we're going to be setting up our structure for the tool tips.
I've got some generic HTML here where I've got a paragraph, a div, some content in it, and I'm going
to be using the span's within these elements in order to add the tooltip.
So first of all, we need a way to select it from the rest of the content so we can add in a class of
tooltip.
And then we also need to add in a data object where we've got some content that we want to pop up for
the tooltip.
So tool tip content.
So this is actually what's going to be displayed to the user as they hover over the tooltip.
And let's also add in one more and we're going to add that into the other spen that we've got down here
below where we're also got JavaScript and maybe in this one we can just output JavaScript.
So that gives us some content that we can work with and make sure that we still have the same tooltip
that says a class of tooltip so that we can utilize that information.
Blank element that we can use can also output some of the tooltip information.
So refreshing our page, not a whole lot to see as we don't have any functionality in there quite yet.
Also going into our success, let's add some styling for the tool tips so we can distinguish them from
the rest of the page.
We can set them up to blue.
We can also set in a background color for them as well.
So again, so we can distinguish them from the rest of the content.
So refreshing it.
So now we've got our two tool tips on page and we're going to use the output element as the one that's
going to contain the tooltip information.
So this is the one that's going to move around on the page.
So adding in the appropriate styling, so display none.
Let's set its position as absolute so we can position it on the page and then have a border of one pixel
that read.
And again, this is going to be the tooltip that's going to show up on the page can also set a background
color.
And this can be anything that you want that anything that fits into your styling, as does some generic
content here, so that we've got some really basic styling being added into it.
Also maybe some padding.
So five pixel and by default, we can set a top position of one hundred picks and the left position
of 50 picks if we wanted to, so that we can see that tooltip content.
So that's what we need for styling.
And we've got all of the HTML elements in place as well.
So coming up next is where we're going to make use of JavaScript.
So select in the elements, whatever.
We're hovering over that element with the class of tooltip and then showing the tooltip just above it.
So go ahead and open up your editor, create some basic HTML content, give the elements that you want,
apply the tooltip, a class of tooltip, as well as Tooele content in order to get information that
you want to display within the tooltip.
And coming up next, we're going to bring the JavaScript in.