Introduction

This tutorial will teach you how to create a HTML5 Tooltip using the Data Attribute instead of the traditional Title Attribute. 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 way we ca call or identify the stored data easily when needed. You are probably wondering why not just use the Title attribute? The reason is because the Title Attribute comes with default settings and is not 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

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>).For example, if you want to add text data to your element, you can name the attribute data-text=”” (or for our case 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 different Link, the data-tooltip attributes are different to demonstrate how each link will display a different tip although they are still within the same data-tooltip “class”.

Add Some Style

Now we will use CSS to display the information within the data-tooltip=”” attribute. In most cases, the data attribute can be targeted by CSS using the [data-*="vaule"] {/* Styles */} selector. In our case, we need to approach it differently. By using the ::before pseudo class, we can tie the value inside data-tooltip as content that will be displayed “before” the link. 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.