Pure CSS Tool Tips Revisited

Creating tool tips with pure CSS and no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from.

For a recent project, I had to research the concept and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws.

So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.

Fixing Problems With CSS Tool Tips

I think all CSS tool tips should have the following features:

• No extra HTML


• Avoid using the “title” attribute


• Vertical and horizontal fluidity


• Shouldn’t break when a link spans two lines


• Shouldn’t use percentages for positioning

Let’s summarizes why these points are important.

Avoiding Extra Markup
Many of the pure CSS solutions utilize an extra <span> element that is initially hidden. This is not necessary and, in my mind, is an obsolete method (even though technically it works in more browsers). Having the extra text in the HTML that way would (I assume) have accessibility problems. So instead we can use a pseudo-element that grabs the value of an attribute on the element being hovered over (more on this below).

Avoiding the “title” Attribute
The next point is about the “title” attribute. Now, if you want a completely cross-browser tooltip, your best bet is to just use a plain old title attribute on the link element, and forget about anything custom. But if you use a custom method, and you’re grabbing a value from an attribute, then you don’t want to use the title attribute. This will cause the tooltip to appear in two different places. Not a huge problem, but I think it’s redundant and sloppy looking.

Use a data- Attribute
So instead of using the title attribute, the best option is HTML5 data attributes (John Resig has a good post on the subject). In short, this is a custom attribute that you create that starts with “data-”. So something like “data-tooltip” is fine, but you can call it whatever you want, as long as it begins with “data-”.

Avoid Breakages
Because pretty much all tool tips are positioned absolutely, this can cause problems if the tooltip is not positioned in a bulletproof manner. So although it might be nicer looking when the tooltip appears in the middle or at the end of the element it’s referencing, a better solution is to make the tooltip appear near the top left corner of the link. This ensures that the tooltip doesn’t appear in the wrong place (for example, when the link spans two lines). To avoid this problem, some have used white-space: nowrap on the links, but I don’t think that’s good, especially if you have links that are longer than one or two words.

Avoid Percentage Units
Another thing I’ve noticed with a lot of tooltip solutions is that they rely on percentages to position the tooltip. This seems like a good way to do it because sometimes you don’t know the size of the element that the tooltip references. But I think it’s best to use pixel values for this, and you’ll see this in the example below.

A Near Bulletproof Solution?

I have no idea if this solution is bulletproof. Maybe there are problems that I haven’t thought of, but after reviewing the bugs in the other solutions, here’s what I’ve come up with:

• View Demo

And here’s the code:

a[data-tooltip]:link, a[data-tooltip]:visited {
	position: relative;
	text-decoration: none;
	border-bottom: solid 1px;
}

a[data-tooltip]:before {
	content: "";
	position: absolute;
	border-top: 20px solid #0090ff;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	visibility: hidden;
	top: -18px;
	left: -26px;
}

a[data-tooltip]:after {
	content: attr(data-tooltip);
	position: absolute;
	color: white;
	top: -35px;
	left: -26px;
	background: #0090ff;
	padding: 5px 15px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	white-space: nowrap;
	visibility: hidden;
}

a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
	visibility: visible;
	-moz-transition: visibility 0s linear .3s;
}

Here are some notes on the code:

• I’m using the attribute selector to target only links that have a data-tooltip attribute


• The text shown for the tooltip is whatever value the data-tooltip attribute has


• I’m using border-bottom for link underling because text-decoration adds underlining to the tooltip, too


• Works in IE8+ and everywhere else, as far as I can see


• Only Firefox animates pseudo-elements, so there is a small delay using transitions on FF, which I think is nicer


• The tooltip is created using a CSS pure triangle shape and a rounded-corner box (IE8 degrades to square corners)


• I’m using visibility: hidden, but you could also use display: none; I’m not sure which is better


• The tooltip is positioned relative to the top left corner of the element, keeping it from breaking when the link spans two lines; the top left corner is always constant


• The tooltip is positioned using pixels, which, in this case I think is more bulletproof than percentages


• If you decide to take the code and modify the shape of the tooltip, you might have to alter the positioning of the tooltip

Feedback?

If this can be improved in any way, I’m all ears. I’m also aware that other solutions may have other benefits I haven’t thought of. So if you notice anything I’m overlooking, I’d love to make this a more complete discussion of pros and cons for pure CSS tooltips. I’ll do my best to make any necessary improvements.

If you want to mess around with the code, here’s a JSBin.

• View Demo

Source : http://www.impressivewebs.com/pure-css-tool-tips