Callbacks often use the anonymous function, which means a functions with no names, because they are invoked immediately once the event takes place. So, there's no need for a name. So let's take a look at an example of how it works, and what we're going to do is do a slightly different version of what we did in the previous episode. Where we did some tips that would hover whenever you went over one of these buttons. So in this case, we want these to toggle on and off and that will let us take a look at some event as well.
So, let's talk about the setup. Essentially we have pretty much what we had in the previous episode. A button and inside that button, we have a span with a class of tooltip with some text that we want to become the tooltip and each one of the buttons also has a class of hastip and then the text that goes in the button. So we've already done all the setup so that this additional text that doesn't show by default, this is going to be hidden, and we look at the style.css file, you'll see here's the code for the button.
Now because we're going to click on these, I've added an outline of none here. And in the tool tip we'll have a background color of yellow and a color of black and some other properties here. One of the key things is to understand how the position attribute is being used, so that the tool tips appear right next to the button. So you can look at episode five for how that works. Now what we want to do here that's a little bit different is make sure that we add a class for what happens when we activate one of these tool tips.
So I'm going to create a class for a button that has a tool tip and has also a class of active inside that tool tip. So right now all these buttons don't have any active class but if we click on them, I'm going to add the class of active to whichever button I click on. So, I'm going to add in here, pretty much the code that I had in episode five. So I'll say this will display as a block element and I'm going to say the bottom will be at 40 pixels and then the left will be at 10 pixels from the position of the current element, because we have the position attribute of the tool tips as absolute and the, sort of, parent of that, has a position of relative.
Then the content or the tool tips will be taken out of the normal flow of the document, and they will be placed in relation to the button. So then what we're going to make that happen, let's go ahead and save this, is by actually using our scripts to take care of this, and this will be a pretty short script but there's a lot that's going to happen here. First I'm going to target of the element on the page that have a class of hastip. So I'll create a variable called tips and I'm going to use document query selector and in this case, I want to use query selector all because I'm on a page that may have more than one tool tip.
So this would work for the entire page. And then in here I want to target all of the content that has a class of hastip. Right, so this will put all of the elements with the class of hastip, which is essentially all the buttons into this variable. Now once I do that, I want to iterate, or loop through all of the different elements, and whenever you use query selector all, you get a list type object. It's not exactly a list, like an array, so you can't use all of the array methods, but you can use at least a for loop to loop through the elements.
So I'm going to use for here and I'll say var i = 0 and we'll go until we get to the length of all the tips. Just say tips.length and then we will increment those tips. Then in here we are going to add an event listener to each one of the tips. So now we can use the tips variable, or the node and then use the i to iterate through each one of the tips, and once I do that then I can use my add event listener method.
This is going to add an event and the event that we want to track here is going to be the click event. So I want to do something when somebody clicks in one of these buttons. And here is where the callback would come in. So the add event listener will take two parameters. I see it takes three parameters. The first one is the event. The second one is the callback, which will be the function that we want to execute whenever this event takes place. So here I could write a function called toggle, right, and then just call that function right here.
Then I would have to, sort of, create that function somewhere function toggle, right and then define that function and this would work just fine, but we're not really going to use this function anywhere else so it doesn't really need to be created separately. We're only going to do this is we're working on this event listener, so we can actually create the function as a callback, and this is what it looks like. We create the function keyword and since we're not going to use it anywhere else, we're going to make it an anonymous function, which means a function with no name and then we are going to sort of create the function just like we would any other function and then, because this is an event, it needs to get a false right here so that it bubbles properly and then we can do something with each one of those tips, or each one of the buttons.
So now when you call a function in an event listener like this, you'll receive back an event and we can track that, we can place the event in a variable that we'll call e. You can actually call it whatever you want, but the event information will come back in this variable called e and that event has a property of target. So the target will be the target of the event, which in the case of a click would be which one of these items I clicked on, which one of these sort of buttons I clicked on.
So the one that we're interested in is the toggle method. And what we could do with that is toggle a class called active. That's the class that we created in our css. So what this should do is whenever we click on any one of these buttons, it will add the class of active and now this becomes a toggleable button because if I click on it again, it will delete this class of active. So now I can click on any one of these and everything is working really well.
So tool tips are a great way to showcase how events can use anonymous functions and these are called callbacks because they essentially execute the function here that we're creating at some other point. In this case the other point becomes the event, which is a click. So if you're using callbacks, here are some pages where you can get more information and I've included some information about using classlist.
You should know how to use that. Browser support is pretty good right now and if you need to use it in older browsers, make sure you check out the pollyfill at the URL right here, and there's also a short list of some other courses that you may want to take. If you want to learn more about classlists specifically, I'm pointing you to a movie just on classlist. It shows you the modern way of looking at classes and toggling things and all of the other methods available in classlist.
As usually, if you have some ideas for this weekly series, or you want to share with me some questions you've been asked, or have asked in interviews, connect with me in LinkedIn or just about any social media network, like Twitter or GitHub at planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.