Welcome back and congratulations to make it to the end of the section where we showed you how to build
out a simple JavaScript tooltip was started out by setting up some styling for the tooltip.
And this one has to be positioned absolute because that element is going to be moving around and we're
going to be moving around using JavaScript.
And we've got some simple styling for the tooltip.
And of course, you can make it look way better and apply your own styling to that.
We need next we needed some HTML and we've got all of the content for the tool tips contained within
the HTML.
So we've got a class of tooltip and data content with the contents of the tooltip contained within the
HTML.
And then we use JavaScript in order to select those elements and apply that interaction to those elements.
We also have an element with the class of output and this is actually going to be the visual tooltip
that shows up to the user.
Next, we use JavaScript in order to select the elements from our HTML into object format that we could
manipulate a lot easier within the code we set of basic global variable for my intervale so we can utilize
that within our script and clear intervals and set intervals so we don't have our tooltip showing up
indefinitely while we're hovered over.
So there is a time limit in case the user is just sitting there hovering over their mouse and it's not
always going to show up.
So it's not going to show up indefinitely.
It's going to be a three second max or 3000 milliseconds.
Then we went through and we selected all the tool tips and added in the vet listeners.
There's two event listeners that we needed to add in.
So that was most over and most out.
Basically, whenever we're hovering over it, we want the tooltip to show and what the tooltip to disappear
whenever the user is not over it.
So that's what we've got that functionality.
We've got the one that disappears here, the display none as well as we've got the display block.
So that's hiding and showing the element, the output element on the screen.
We also saw that we could use the event trigger in order to the event object in order to get the X and
Y position.
So this is X and Y position of the mouse.
And this is actually perfect, an ideal where we can set our tooltip.
And then what we did is we use those variables and updated the style value of the tooltip element.
And you can see that whenever we do an inspect that whenever we hover over, you can see that that output
one is updating.
So we're constantly updating those top left values as well as the display properties whenever we're
hovering over.
And that's what we're doing with the JavaScript we're manipulating as well as the inner HTML.
So this is the content that is shown to the user whenever we're hovering over the tooltip and we're
getting that content from the element itself, getting the attribute and we've set just an attribute.
We've called it a data tool content, and you could actually call it whatever you want in selecting
that attribute, as long as it's contained within the element and you've got an equal sign there that's
going to equal whatever the value of that element attribute is.
So go ahead and add this into your own project.
If you have any questions or comments, please feel free to ask.
I'm always happy to help clarify any of the content within the previous lessons.
Thanks again for taking the section and I hope you've enjoyed it.