How do you use the data- attribute in HTML?

- [Instructor] 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 your prefix your custom name with the keyword 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. Now, you can add additional dashes, if you want to, if you need a more complex data attribute. We'll take a look at those in just a minute. Now, the attribute is accessible through CSS using brackets once it's in the HTML. And that lets you create some really powerful selectors. Now, the value in these data attributes can also be accessed through JavaScript using a special parameter called dataset. And then the name of the attribute using dot notation. Now, if you're using more than one dash and the name, then you camel case the name, just like you would with any other CSS style. 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 this style sheet, this looks pretty plain. Now, I normally wouldn't 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 want 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. And 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, we'll add the attribute data dash tool tip. And this is just something 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 configure 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 play something right before the tool tips. So let's go ahead and also use the content parameter here. And here we can use the A-T-T-R little method and type in the value of the text that is 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 default 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. All right. So, I don't really want to display these by default. So, add a display of none here. And those will be hidden by default. 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 roll over 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 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. And let's go ahead and take a look at this kind of all together. And then in my style dot CSS file, I can actually create those as well, targeting these 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. And then I'm going to copy this one for the other parameters here. So... All right. 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 could do that by adding a data position attribute to the HTML. And then we can call that within the CSS. Now, as I mentioned before, we can also control and set these parameters using JavaScript, using a special attribute called dataset. So, let's go back into the index HTML file. And in a couple of these, we're going to add another parameter called data highlight, click. And we'll set this to on. So we'll add it here as well as three. So let's go ahead and save that. And 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 call user call back 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. And 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, the item right here is the same item that we are generating when we go through each of these elements. So, we've created sort of a temporary variable here called item. And that's what I'm checking to see if those items have a data attribute. And we're looking for the data attribute called highlight click. So you kind of ignore this data. And then we have highlight click. When you are calling that in JavaScript, you need to say it with camel case. You'll say highlight Click. And the C in click is capitalized. 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. All right. 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's 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. And 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. And let's go ahead and make these blue instead of green so we can make sure that it's working. So now, if we click on these two, they'll become blue. And these still don't click to blue. So, a couple of different options here. You can use query selector and use the CSS name, or you can use dataset within JavaScript to control how the data elements work and read and write their data.