Custom Data- Attributes In HTML5
In the blog post we will look at another exiting feature of HTML5 , custom data-* attributes on any HTML elements. Technically it was possible to add custom attributes on HTML elements prior to HTML5, however that would result into non valid HTML because these attributes you add were not part of HTML specifications.
That is changing going further with HTML5, where you can add whatever number of and whatever types of custom data- attributes you want to add and it will still result in valid HTML. These attributes will not available to the consumers of your web pages, but as a developer you will be able to leverage them to simplify your JavaScripts further.
As part of HTML5 custom data attribute specifications, you can define custom attributes starting with "data" keyword. So your custom attributes will be data-* where * can be any thing you want but has to be one character minimum. So in other words your custom attributes must be prefixed with "data-" attribute in order for it to be a valid HTML5 markup.
Adding Custom data-* Attributes
With the introduction, let's build a small sample that demonstrates the use of custom data-* attributes. As usual I will be using Visual Studio 2012 to create the sample. I have created an empty ASP.net application and added HTML page called dataDemo.htm. I have also added jQuery from jQuery CDN.
In this HTML file, I have also added a couple of Div element. These elements contains three data-* custom attributes. As you see, these are custom attributes but still the result is a valid HTML markup.
The next question is, how do we add these additional details parameters. Let's say we want to display these extra product details when somebody mouse over these DIVs. We can write following JavaScript function that will be executed on mouseover on these DIvs and show the additional details as a tool tip.
Reading Custom data-* attributes using jQuery
First of all, reading these data-* attribute values using jQuery is much simpler if you are using jQuery data API.
Following is the complete jQuery function we can use to show and hide tool tip on mouseover and mouseout event of our .Item DIVs. My tooltip implementation is very simple but you can plug one of many jQuery tool tip plugins out there.
To briefly describe, when you mouse over on the Div who has class '.Item', we will add a new span with class '.tip' and the text of that span will be the values of data-rating and data-stock custom attributes.
And when we mouse out of that we will just be removing that span next to the current '.Item' div user mouseout from. Following snippet shows the CSS class describing the styling of our tool top element.
Let's go ahead and view this page in the browser. Mouse over on to any of these two sample DIVs and you should see the results similar to following.
Real Time Use cases of custom data-* Attributes
Above is just one of many use cases where this feature can be useful. One of the other very popular use I have seen for data- attributes is in Asp .Net MVC & DataAnnotation in collaboration with jQuery unobtrusive validation. In some of my previous posts on Asp .Net MVC I have explained in details how DataAnnotation from Asp .Net MVC are converted into custom data- attributes and being utilized by jQuey Validation plugin to provide unobtrusive validation features.