Today’s lesson we will get creative with HTML5 to create a Data Attribute Tooltip. The Data Attribute is a new feature that lets us store custom data inline within our HTML elements that will be private to the page or application. This is a helpful way of storing extra data or values to particular elements to call or identify them when needed. We will learn how to store the data to a link and display the data as a Tooltip. You are probably wondering why not just use the Title attribute? We could simply use the title but the Title Attribute comes with default styles and is not as flexible for designing. We want to have total freedom when designing so we can produce the best possible web page. Let’s get started.

HTML Markup

Let’s fill out three paragraphs with at least one link in each one. The Data Attribute works like any other attribute where is can be placed within the element and set to equal a value (ex <a href=”#” data-*=”any value”>Link</a>). What makes Data Attributes so flexible is that they can be called anything and can act as their own class or id. For example, if you want to add text data to your element you can name the attribute data-text=”” or add data for your ToolTip just add data-tooltip=””. As long as data- is placed in front, you can replace the * with any word to help you organize and call the data inside the element. Here is our example markup.

We created <a> tags with the data-tooltip=”” to specify that this data is used for our link’s Tooltip. Within each Link’s data-tooltip attribute we placed some different text to demonstrate how each link will display a different tooltip although they are still within the data-tooltip “class”.

Add Some Style

Now we will use CSS to display the information within the data-tooltip=”” attribute. By using the ::before pseudo class, we can tie the value inside data-tooltip as displayed content. We can then control the placement of the displayed content by setting it to absolute position.

Note: All the links using this technique must be set to relative position. Give the links a class like .tooltip to specify which links will be set to relative. This way the absolute positioned data attributes will be nested properly underneath the respective link instead of all the tooltips floating in the same place on the page. Apply this CSS code between your HTML’s <head> tags.

With the Links set to relative position and the data appended before the links, you will now see the tooltip appear properly underneath the links. To help visibility and add to the user experience, we created a triangle made by using the ::after CSS property to have the tooltip point to the link it is referencing. We also make use of the :hover property to give the added hover effect similar to the Title Tooltip.

Helpful Tips: The ::before and ::after Pseudo classes are very helpful for prepending and appending additional content to the specified class. Any text or attribute can be placed within the content:”” css value. Take note that anything within the “” will display the exact value inside. Like our example, you can specify to place a variable data attribute by using attr(data-tooltip) without using the “” quotations.

Wrapping it Up

The Data Attribute may be the most versatile and best addition to the HTML 5 library. The application and simplistic semantic opens up a numbered of creative uses for front-end programmers. Other applications for the Data Attributes could be using it inside the <img> tags to help organize and display text for your online portfolio pieces. Get creative and apply the data attribute and see what you can use it for.