The data-* attribute is a powerful way of adding meaning to your HTML tags without disrupting the structure of your HTML. You may have seen it before, but do you really know how to use it? Let's check it out.
- [Narrator] The data attribute is a powerful way of adding meaning to your HTML tags without disrupting the structure of your HTML. Now you may have seen it before, but do you really know how to use it? Let's check that out. The data attribute works just like any other attribute, but you prefix your custom name with the key word data as well as a dash, so you can create your own pieces of data within an HTML tag by putting in your own information with the data hyphen.
So let's take a look at how this works. I've got a pretty simple page right here with a series of buttons. You can see that the HTML is pretty simple. I just have different buttons right here with a class of BTN, and if you look at the style sheet, this looks pretty plain. Now I wouldn't normally style my buttons with a display of block, and I wouldn't put so much room in between these, but I want to make sure I get sort of a little bit of breathing room in between these elements when the tool tips appear. So the only other thing that's interesting here is that I have the buttons set to a position of relative.
That's because I wanted the tool tips to align to my buttons, so the tool tips themselves will need to have a position of absolute, so let's go ahead and start by going to the index, that HTML. I'm going to add a class of tool tip to all of these buttons, and I want to add a data attribute to each of these buttons, so I will add the attribute data dash tool tip, and this is just somethin' I'm making up. You can make up your own names if you want to, and I'll give each of these a different value.
Once I have both of these added, then I can go into my style dot CSS file, and can figure out how those are going to work. So let's go ahead and add a tool tip class here, and we'll use the before selector here to place something right before the tool tips, so let's go ahead and also use the content parameter here. Here we can use the ATTR little method and type in the value of the text that is in our data attribute, so we can say data dash tool tip here, and when I do that, you can see that it actually went to the HTML.
It grabbed that data attribute and it used it as content right before our button, so that's pretty cool. Let's go ahead and style this with some other styles. Now we want this to be on top of the current button, so we're going to give it an index of one, and then some other styles here.
I'm also going to add a position by the fault of minus 100%, and I'll put the left position to zero, so they're all going to appear on top of the buttons themselves, and again, because this is a position of absolute and the parent has a position of relative, they're going to be relative to the position of each individual button. Alright, so I don't really want to display these by the fault, so I'll add a display of none here, and those will be hidden by the fault.
So now that I've done that, then I can also add a tool tip hover before to control what happens when somebody does a rollover, so I'll do a display block, and now when I rollover these, the little tool tip appears without a lot of effort. Now if I want to, I can also add additional attributes to these different data units right here, so if I want to I can sort of leave that appearing on top as the default, but then I can also add additional data attributes.
You can add as many as you want as a matter of fact. So we'll do a data position here, and we'll type in a few other options here, so we'll make an option for the data position being on the right, bottom, as well as left. Let's go ahead and take a look at this kind of altogether.
Then in my style dot CSS file, I can actually create those as well targeting the specific elements with the data position attributes. So I can say get the tool tips that have with brackets a data position attribute equal to right, and just like before, I'm going to insert something before or control something with the before attribute, and I'll set that to a top of 100, and a left, actually it should be a left of 100%, and a top of zero.
Then I'm going to copy this one for the other parameters here. Alright, let's go ahead and check these out. So top, right, bottom, and left. Obviously if this was somewhere else, this would look great. That's why we have these different options, and we can do that by adding a data position attribute to the HTML, and then we can call that within the CSS.
Let's go ahead and save that. Now we'll go into our script and find a way to control the elements with that data attribute. So I'll create a variable called highlight, and what I can do is use query selector, and I want to grab all the elements with a class of tool tip, and then I'm going to go through each one of those elements.
So for each of those elements, I'm going to use a callback here, and add an event listener to each of those elements, so the event listener that I want to track is a click, and I'll need to set it up like this with another callback here. What I can do is check to see if these buttons have an item with a data attribute, and we can get that through this data set parameter.
So if this item data set, highlight click is on, then I'm going to set the style of this element, so I'll do background color to the color red. Alright, so let's go ahead and save this, and then go back into our app, and now if I click on these two buttons, they will become highlighted with this background color, but if I try to click on these other buttons, they won't do that, so this data set attribute gives you access to the data attributes.
There is another way of doing this. You could also actually just do this a little bit simpler. Just use the CSS attribute right here, so you could say data highlight click. So doing it like this actually grabs all the elements that have that data highlight click attribute, and in this case, you do use the dashes. You still go through each of those elements, but instead of adding click events to all of the buttons, you're just adding them to the ones that match that data attribute, so you don't need to check here.
Now if you have some ideas for this weekly series, and maybe you want to share with me some questions you've been asked, or have asked in interviews, contact me at LinkedIn, or just about any other social media network like Twitter or GitHub@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.