Are you ready to bring the JavaScript in and I know that's what you're here for.
So let's begin and we need to first select our elements into usable objects and JavaScript.
So using const because this is going to be a node list that's not going to be changing.
Let's create an object called Tool Tips and we're going to use document query selector, all because
we're selecting all the elements with a class of tool tips or tooltip.
Save that and refresh.
And of course we don't see anything different quite yet, but we see within tool tips we've got a node
list of two items so we can loop through those elements.
So creating a for loop or we could do so.
Let's do a simple for loop setting are variable of AI to be zero and looping through while AI is less
than a tool, tips and node lists have lengths just like arrays looping through all of the elements
that have a class of tooltip.
And then let's increment I so this will output all of those elements and make them usable.
So selecting our tool tips object and selecting the index value of AI, we can select the element and
we can also add an event listener at this point.
So let's add an event listener.
The event listener that we want to add is mouseover and whenever mouseover happens, then we want to
run the function.
So the blockquote that's going to be contained within here.
So for now, what we'll do is will console, log out the event, object into the console.
So now every time we hover over them, whenever we got mouseover, then we've got this firing off the
event object is firing off.
And this is actually where we want to add in the tooltip.
And we can also get the element that triggered that event as well there.
So we can see that's the element.
And that means that we can get the data that's contained within the attribute.
And we've got this object using get attribute because the data attribute the data to a content attribute
is contained here within the attributes of the element, and we can get the value of that attribute.
So let's set up a variable for that and we'll just call it Holder.
So now whenever we hover over, we get the contents of the tool.
So now it's a matter of calculating out where we want the tooltip to show up and updating the content
with an output of the contents of tooltip.
So let's do one more thing before we conclude this lesson, and we're going to select the element with
the class of output so that we can utilize that within our upcoming lesson.
So go ahead and do that.
Add in the event listener for your tooltip.
So you might have more than just the two that I have.
And this is fully dynamic's.
So the more that you add in and they're all going to be adding in and having that mouseover function
being applied to them, you've added in the event, listener, you're going to be ready for the next
lesson or we're going to be showing you the tooltip.