Tooltips have become an important part of User Interface/User Experience (UI/UX) Design patterns.  They can provide important details about HTML elements when we hover over them with our cursor without interfering with the design of the page. This can really help if we want to make things as simple as possible.

This method is for instances where you want to have complete control over the style of the tooltip. Alternatively, the best solution is to use the title attribute as this will appear even without any CSS. The following is the simplest method available for implementing styleable hovering tooltips without requiring Javascript.

We are going to use the HTML5 data attribute. This new feature gives us a lot of freedom to assigning data to elements. We can add whatever name we want after data- to create an attribute. For example, we will give the following paragraph element the attribute data-summary.

<p data-attribute="This is a summary of the following paragraph">This is a very long paragraph</p>

We’ll make this work for us with a simple CSS trick to give us a tooltip that we can style however we want. This is our HTML.

<a class="tooltip" data-tooltip="Show transaction history" href="#">Log</a>

The following is our CSS which will show the tooltip on a mouse hover. We can put the rest of our styling in here too.

.tooltip:hover:after {

content: attr(data-tooltip);

position: absolute;

}

About Canadian Web Hosting

Since 1998, Canadian Web Hosting has been providing on-demand hosting solutions that include Shared Hosting, Virtual Private Servers (VPS), Cloud Hosting, Dedicated Servers, and Infrastructure as a Service (IaaS) for Canadian companies of all sizes. Canadian Web Hosting is SSAE 16 Type II SOC 2 certified, ensuring that their processes and business practices are thoroughly audited against industry standards. Canadian Web Hosting guarantees a 100% network uptime, and a total money-back guarantee that backs everything they do. Customers can get help by calling 1-888-821-7888 to get 24/7 support. For more information, visit them at www.canadianwebhosting.com, or get the latest news by following them on Twitter at @cawebhosting or by liking their Facebook page.