Now that we have the mouseover being set, we also want to set up an interval in order to show the tooltip.
So let's set that one up and this is going to be set as a global variable.
We'll call it my interval, and we're just going to set it up as a blank variable that we can now use
within our code.
We can get out of the console messages as we're not going to need those anymore.
Adding it in to we're adding an event listener.
Let's select.
And first of all, we're going to clear the interval.
So in case there is an existing interval, so before we set the my interval will clear the existing
interval and we need to get the position of X and Y of the mouse and we'll console log that information
out for now.
But we can get that information within the event object and that can be contained within Client X..
And we've also got one for client Y.
So whatever we hover over, we get the exposition of the mouse and we can also get the Y position as
well.
And then we can utilize these in order to determine where we want to position our tooltip.
So taking our tooltip object and that's the output element that we've selected within the variable called
output and taking output.
Let's update its style properties and its display property and setting that to block so that it's visible.
We also need to position output.
So taking output and taking its style property, so taking its value for top, we're going to take whatever
the value of client Y is and add five to that and then make sure that we add in the PIC's so that we
can set the style value add on also using the left for the horizontal and do the same thing so that
we'll position the value of the tooltip wherever we're located.
So you see it's appearing there and it's showing up as we're hovering over that element.
So next we need to output an update to inner HTML of that element and we already have that information
being contained within Holder.
So adding it into Holder.
Now, every time we hover over, we see we've got the tooltip popping up and now there's one other thing
that we need to set and that's the interval.
So it is clearing out the interval.
Let's set our interval.
So using that global object of my interval and then the set interval function in JavaScript, setting
up a function.
So we want it to disappear after a certain time period and we can set that to three thousand milliseconds.
So no matter what, even if we're still hovering over that element, we're taking output and we're updating
its style property and the display property setting that to none.
So that will always disappear off the screen.
So even if we're still hovered over, you're going to see that the tooltip will stop and disappear.
And that's actually exactly what we want to happen.
And there's one other function that we want to happen, and that's whenever we move off of the element.
We want to add another event listener for Mouse out, and that can remove out the tooltip as well.
So let's add that one last, that listener in as the same thing as the mouseover except its different
value that we're listening for and we're listening for on this case.
We're listening for mouse out.
And whenever we mouse out, then we're going to hide the tooltip.
So do that.
And now we know that the mouse out.
So whenever we go over it, we show it shows up for a little bit and shows up for up to three seconds.
And whenever we hover over it again, we see the tooltip once again.
So go ahead and add this into your project.
Add in the tooltip displaying whatever you're hovering over the particular selected content and have
that show up within your page using the different event.
Listeners listening for Mouse over and Mozote.
So coming up next, we'll do a quick code review.