Live DemoDownload Source Code

Getting Started

The page itself is quite boring so I want to focus primarily on the CSS code. Each anchor link is given a tooltip based on the class .tooltip. Using the HTML5 data syntax I’m pulling the text from an attribute named data-tool.

It’s best to avoid the title attribute since this will display another browser-based tooltip on top of the CSS. We can change the direction of each tooltip with additional classes on the anchor link. Another class .animate will apply transitions to the effect as well.

My original idea started from this tutorial which uses a larger clustered block of code. Unfortunately the author suggests using alt text for the tooltip title, but alt is not allowed to be placed on anchor links. Thus I’ve retooled the tips and updated to cleaner HTML5/CSS3 code.

Building the Tooltip

The best place to start is looking over the generic code before anything should appear on the page. Anchor links can use :after and :before pseudo-elements to be applied using CSS. This lets developers customize a bit of content before & after any applicable element. In this case I’ll be creating a triangle tooltip along with a separate bubble box.

The anchor link itself is positioned relatively so the pseudo-elements can be applied using absolute positioning. This makes it easier to fit the bubble and triangle together into a tooltip. visibility:hidden will keep the tip out of the user’s sight until they specifically hover a link. Otherwise the tooltip is hoverable but sitting at 0% opacity.

You’ll notice the default background uses a translucent rgba() setting. :before contains the triangle code while :after contains the tooltip bubble and text with the property content: attr(data-tool).

You’ll notice at the bottom of my code sample we update the position whenever a user hovers onto the anchor link. This position will change for each separate tooltip location along with border styles for the arrow.

Position Classes

You can apply an extra class onto the anchor link to force a certain tooltip location. Default appears on top of the text and the other classes are .right, .left, and .bottom.

The bottom position uses pixels along with the default top position. But I also wanted to demonstrate how to apply styles using percentages on the left/right tooltips. It’s best to stick with a unit that’s similar to your paragraph text so everything stays in proportion.

Percents are often needed for horizontal positioning since we don’t always know the pixel width of a link. Scalable ems are another choice when dealing with fonts, but positioning can get tricky.

The only other changes aside from position are border widths and colors. This gets applied onto the :before element because it’s targeting each triangle. The position dictates how the triangle looks and which side of the bubble it needs to appear.

Extra CSS Styles

The two extra class snippets are for recoloring tooltips and using animated effects on the display.

Color class codes are very simple but also dense and repetitive. This block of code is for one single color palette of blue. The tooltip :after selector is only needed once to update the bubble’s background. We do need 4 selectors targeting each arrow in relation to the 4 positions of the tooltip.

Colors need to be applied onto different borders for different triangle positions. Luckily it’s very simple to copy/paste and update with your own color scheme.

Since the tooltip bubble and triangle can be animated together I’ve written one selector for both. They use the same animation style to keep everything fluid. All you need to do is add the .animate class onto any tooltip anchor link.

Attaching to Other Elements

The final piece of this tutorial explains how to use these tooltips for elements which do not have any before/after pseudo support. The adjacent sibling selector is important in relation to the tooltip – feel free to change this code if you need to target more specific elements.

You’ll notice most of the properties look very similar as before. We still pull content from data-tool and the tips appear only when a user focuses onto an input field. The .fieldtip class can be added onto any element. I’ve chose a span as you’ll see in my HTML:

Also with these external tooltips I’ve kept the animation properties attached. You might try to change things up with a different color, font size, or any number of additional CSS properties.

Live DemoDownload Source Code


I feel these tooltips provide an excellent starting template for customization. You can remove or change any of the properties to get different background colors, animation styles, or image-based triangles. Keep in mind that both the animated effects along with the CSS triangles can appear buggy in older browsers. Try downloading a copy of my code and see what you can build for your own projects.

For more related resources: