Building HTML5 and CSS3 Anchor Link Tooltips
There are many tutorials online discussing the idea of CSS-based tooltips. Yet many examples require HTML elements along with the anchor link. Visitors can get a basic tooltip message by using the default title attribute. I’d like to follow this method and update the process just a little bit.
In this tutorial I want to demonstrate how to build CSS3 tooltips which are contextually based on an HTML5 attribute. Using different classes we can incorporate unique color schemes along with CSS3 transition effects. This technique doesn’t require any extra HTML unless you attach the tooltips onto a different element (like a text field). Let’s get started!
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
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.
<p>Think of it like <a href="#" data-tool="Sample tooltip" class="tooltip animate">testing stuff</a> for various purposes.</p> <p>And how about <a href="#" data-tool="screwy eh?" class="tooltip animate right">off to the side</a> of the text?</p> <p>Why not use a sleek <a href="#" class="tooltip animate blue" data-tool="banana bana fo filly">animation</a> for the tips? If you don't like the CSS3 transitions just remove the class to <a href="#" class="tooltip" data-tool="simple!">turn them off</a>.</p> <p>Let's also take a peek at <a href="#" class="tooltip bottom animate blue" data-tool="Get ready because this tooltip is loooong. I mean seriously...">bottom-styled tips</a>. Do you think sideways tips could work again?</p> <p>I dunno but let's <a href="#" class="tooltip right animate blue" data-tool="just hangin'">find out</a>.</p> <p>And perhaps they can appear <a href="#" class="tooltip left animate blue" data-tool="tooltips are clickable">on the left</a> as well...</p>
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.
a.tooltip{
position: relative;
display: inline;
}
a.tooltip:after{
display: block;
visibility: hidden;
position: absolute;
bottom: 0;
left: 20%;
opacity: 0;
content: attr(data-tool); /* might also use attr(title) */
height: auto;
min-width: 100px;
padding: 5px 8px;
z-index: 999;
color: #fff;
text-decoration: none;
text-align: center;
background: rgba(0,0,0,0.85);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
a.tooltip:before {
position: absolute;
visibility: hidden;
width: 0;
height: 0;
left: 50%;
bottom: 0px;
opacity: 0;
content: "";
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}
a.tooltip:hover:after{ visibility: visible; opacity: 1; bottom: 20px; }
a.tooltip:hover:before{ visibility: visible; opacity: 1; bottom: 14px; }
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.
/* tips on bottom */
a.tooltip.bottom:after { bottom: auto; top: 0; }
a.tooltip.bottom:hover:after { top: 28px; }
a.tooltip.bottom:before {
border-width: 0 5px 8.7px 5px;
border-color: transparent transparent rgba(0,0,0,0.85) transparent;
top: 0px
}
a.tooltip.bottom:hover:before { top: 20px; }
/* tips on the right */
a.tooltip.right:after { left: 100%; bottom: -45%; }
a.tooltip.right:hover:after { left: 110%; bottom: -45%; }
a.tooltip.right:before {
border-width: 5px 10px 5px 0;
border-color: transparent rgba(0,0,0,0.85) transparent transparent;
left: 90%;
bottom: 2%;
}
a.tooltip.right:hover:before { left: 100%; bottom: 2%; }
/* tips on the left */
a.tooltip.left:after { left: auto; right: 100%; bottom: -45%; }
a.tooltip.left:hover:after { right: 110%; bottom: -45%; }
a.tooltip.left:before {
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent rgba(0,0,0,0.85);
left: auto;
right: 90%;
bottom: 2%;
}
a.tooltip.left:hover:before { right: 100%; bottom: 2%; }
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.
/* tooltip colors (add your own!) */
a.tooltip.blue:after { background:#5f87c2; }
a.tooltip.blue:before { border-color: #5f87c2 transparent transparent transparent; }
a.tooltip.bottom.blue:before{ border-color: transparent transparent #5f87c2 transparent; }
a.tooltip.right.blue:before { border-color: transparent #5f87c2 transparent transparent; }
a.tooltip.left.blue:before { border-color: transparent transparent transparent #5f87c2; }
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.
a.tooltip.animate:after, a.tooltip.animate:before {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
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.
/* input field tooltips */
input + .fieldtip {
visibility: hidden;
position: relative;
bottom: 0;
left: 15px;
opacity: 0;
content: attr(data-tool);
height: auto;
min-width: 100px;
padding: 5px 8px;
z-index: 9999;
color: #fff;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
text-align: center;
background: rgba(0,0,0,0.85);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input + .fieldtip:after {
display: block;
position: absolute;
visibility: hidden;
content:'';
width: 0;
height: 0;
top: 8px;
left: -8px;
border-style: solid;
border-width: 4px 8px 4px 0;
border-color: transparent rgba(0,0,0,0.75) transparent transparent;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input:focus + .fieldtip, input:focus + .fieldtip:after {
visibility: visible;
opacity: 1;
}
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:
<input type="text" class="basictxt" tabindex="1" data-tool="Enter some text"><span class="fieldtip">Enter some text!</span>
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.
Closing
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.