-
200828 Feb
As this is my first post, I’d like to introduce myself. My names James and I’m currently working as a senior User Interface Developer for Teachers TV. Like many of you guys, I’m fanatical about web standards and about creating the leanest, most semantic markup possible. I too am excited about the new possibilities with the arrival of CSS3, and am keen to contribute as much as I can to this great site. My first post is regarding a new method of creating Tooltips that I devised while coming up with a solution for a recent project.
Up until now, there were a few options in existence; ugly Javascript-based methods, or solutions that use blank anchor tags (for IE6 compatibility). Another possibility is to ignore IE6 altogether and make use of the hover pseudo class in conjunction with the parent element that contains the tooltip text. I had to think out the box a bit on this one, but have come up with a completely new CSS3-based solution.
My solution degrades gracefully in browsers that don’t support the CSS3 elements I’ve used and is a lot more elegant than former methods since it utilises an element’s title attribute, rather than creating additional markup within a parent element.
Let’s start with the HTML (Note: the following example is based on use of icon background images for the divs, hence the fixed dimensions):-
<div title="Tooltip text for first div"></div> <div title="Tooltip text for second div"></div>
In short, my method is achieved by making use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class.
First off I grab the value of the divs title attribute by using the content property’s attribute function. Notice how I set the generated content to display:none -I’ll make it visible on :hover.
div:before{ content:attr(title); display:none; }
I now combine both the :hover class and :before pseudo element together, to specify values for the generated content when the div is hovered over.
div:hover::before{ width:200px; display:block; background:yellow; border:1px solid black; padding:8px; margin:25px 0 0 10px; }
One of the problems I came across at this stage, was that when having two elements floated left to each other and you hover over one of the elements, although the tooltip displays, it renders underneath the adjacent element. It is a simple case of layering the generated content over the div; my immediate thought was to specify a layering value in the above statement. However, after referring to the relevant W3C spec, it was apparent that in line with their recommendations, user agents ignore the position property in an instance such as the above statement, therefore rendering a z-index value useless.
The solution was to specify the z-index and position properties in a separate statement dealing exclusively with the :hover pseudo class.
div:hover{ z-index:10; position:relative; }
This meant that it now works! It of course works in every browser above IE7 including Safari 3, Firefox 2.0.0.12 & Opera 9.5b
Obviously there’s nothing you can do to stop the default behaviour of standards compliant browsers regarding rendering of title attributes, so when leaving your cursor on my method for too long, the default browser behaviour will overlay the generated content CSS effect
You can skip to the end and leave a response.
-
Comments
-
01.
Nifty idea.
However, it falls down as (most) browsers also include a pop-up for the ‘title’ attribute. So we have a nice styled, floated ‘div’, which then becomes overlaid by the browser default tool-tip. Which is no good.
-
02.
as Guy Said the title tag makes browsers show the title tag hover directly over your tool tip, making it impossible to read the tip. But on another good note this works in Opera 9.5b if you want to add it to your list.
-
03.
-
04.
I think I would move the text from the title attribute to inside of the div, and then proceed like you did. That would make it CSS2 though, so I guess it wouldn’t fit as well on this blog :)
-
05.
I agree with Emil. Also, sometimes the tip may also contain some html tags, then it would be no good to hold it in title.
-
06.
Depending on how important the tooltip is, it may be worthwhile to sacrifice compatibility with some browsers in order to have use something other than the title, so that it doesn’t interfere with the nice-looking tooltip. If it is important that all users see it, then obviously you don’t want to sacrifice compatibility if you can avoid it, but I see nothing wrong with creating little bonuses or extras for the people who can see them.
Another less pretty but more compatible solution would be to add a bit of extra padding at the top of the tooltip so that even when the title displays normally it doesn’t cover up the tooltip.
-
07.
In response to some of your comments. I guess it’s best to think of my method as a proof of concept rather than something that can be immediately deployed- I always knew that this method was going to create a conflict with the user-agent behaviour of the title attribute, which is currently the most semantically correct attribute to use in this instance. With the future working drafts of XHTML 2.0, it’s possible that there will be additional instances (suitable attributes) that the method can be used in conjunction with.
When I first came across the content property all that time ago, I was very hesitant as to me this blurs the line between separating content and style, especially in the case of using a text-string value (a possible option if you were to remove the title attribute). However, I feel the attribute function makes for an elegant value, since you’re only using CSS to grab already-generated markup, rather than hard-coding content directly to make up the value.
@ Cory – thanks for the heads-up; I’ve updated my post accordingly.
@ Madis – if you are wanting to use tags within the tooltip, then yes, you would need to look at a more traditional solution, like Emil is describing. -
08.
Lars says:Comment » February 28th, 2008 at 4:47 pm
If you want to avoid clashes with the normal tooltip, you could always just make up your own tooltip attribute and use that instead. It isn’t semantic, and it doesn’t validate, but it works :p
Since browsers already show the title attribute as a tooltip, this technique is more interesting to use with other attributes. Or you could just use it to show meaningless images for fun, such as a litte CSS3 ninja that shows up next to the element you hover :)
-
09.
Brad says:Comment » February 28th, 2008 at 5:59 pm
“…my method is achieved by making use of the :before (or :after) pseudo class and content property, combined with the :hover pseudo class.”
Technically, “before” and “after” are pseudo-ELEMENTS and “hover” is a pseudo-CLASS. That’s why you were able to use two colons with “::before” (although you did not do so consistently, which may be confusing for some people).
-
10.
Brad says:Comment » February 28th, 2008 at 6:06 pm
The difference, FYI, is that pseudo-elements are like separate elements that you generate, something like a DIV (or span, depending on the display property it gets) that wasn’t there until you generated it with the “content” property. A pseudo-class, on the other hand, represents some aspect or piece of the element that was there all along that you are styling separately from the element as a whole.
Two colons are preferred on pseudo-elements, but most also accept single colons (for compatibility with existing Web sites that might have been written to the older one-colon-for-all-pseudos standard.
-
11.
Thanks Brad for highlighting my typo- don’t know how that got in there! [note to self] – avoid writing posts when it’s late in the day…
-
12.
Example tested and works in:
Firefox 1-3
Safari 1-3
Opera 9, 9.5bExample almost works in:
Opera 7, 8Degrades gracefully (browser shows default tooltip) in:
IE 5-7 -
13.
Cómo hacer un tooltip mediante CSS3…
Un ejemplo de cómo realizar un tooltip mediante CSS3 utilizando igualmente técnicas que permitan alternativas para navegadores que no soporten algunas de las especificaciones e dicha versión de hojas de estilo…
-
14.
“This meant that it now works! It of course works in every browser above IE7 including Safari 3, Firefox 2.0.0.12 & Opera 9.5b”
If you meant that it works in IE7 unfortunately it didn’t for me. If it had I might have used it on my own site.
-
15.
If you set the top margin to a negative value, the tooltip hovers above the div and the browser’s own tooltip doesn’t hover over the top of it; doesn’t solve the problem of having duplicated tooltips, however. Anyway, interesting stuff, James.
-
16.
-
17.
You can do this sort of thing with regular CSS and wrapping the tooltip in an inline tag (like em); this would be the CSS:
a:hover em{display:block;}
something like that-ish, but not literal.
- 18.
-
19.
Fatih Hayrioğlu’nun not defteri » 08 Mart 2008 web’den seçme haberler says:Comment » March 8th, 2008 at 2:49 pm
[…] CSS3 ile araç ipucu yapmak. Bağlantı […]
-
20.
Nice example of CSS3. Someone may find this CSS (or JS) version of tooltips helpful: http://ghettocooler.net/2007/12/18/jquery-tool-tips-for-by-a-javascript-noob/
-
21.
-
22.
-
23.
Presumably, this technique would also enable the ‘cite’ attribute of the ‘blockquote’ tag to be displayed as a tooltip. True, not many people use the cite attribute, but one reason for this is precisely because browsers have never displayed it properly. Cite could now be revived from semi-obscurity and used as it was always meant to be used; and no javascript required either. Excellent!
-
24.
CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Noupe says:Comment » May 21st, 2009 at 11:31 pm
[…] Tooltip with CSS3 […]
-
25.
CSS3 Exciting Functions and Features: 30+ Useful Tutorials says:Comment » May 22nd, 2009 at 10:22 am
[…] Tooltip with CSS3 […]
-
26.
- 27.
-
28.
[…] Tooltips with CSS3 – How to make use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class to create nice tooltips. […]
-
29.
[…] Tooltips with CSS3 – How to create tooltips using only CSS3 pseudo elements :before, :after, :hover and css property Content to fetch image title and display it as tooltip text. […]
-
30.
Hey I was doing this job with jQuery before CSS3.
Thanks CSS3..
-
31.
-
32.
50+ Stunning CSS3 Articles, Cheat Sheets and Tutorials Collections | tripwire magazine says:Comment » November 15th, 2009 at 1:34 pm
[…] an image gallery with :target – How to use the new CSS3 selector Tooltips with CSS3 – How to make use of the :before (or :after) pseudo element […]
-
33.
[…] Tooltips with CSS3 – CSS3 . Info […]
-
34.
CSS3 Gallery, Showcase & Inspiration. Showcasing the best CSS3 Web Design on the Internet | CSS3 Tutorials | CSS 3 Gallery says:Comment » January 16th, 2010 at 6:38 pm
[…] Tooltips with CSS3 – How to make use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class to create nice tooltips. […]
-
35.
change :hover to :focus
div:focus{
z-index:10;
position:relative;
}div:focus::before{
width:200px;
display:block;
background:yellow;
border:1px solid black;
padding:8px;
margin:25px 0 0 10px;
}
and add two tabindex=”0″ to divs (or change “div” tag to “a” tag)Now we have a solution to display title attribut for who navigate with the tab key without js.
lol - 36.
-
37.
[…] 16. Tooltips with CSS3 […]
-
38.
Ben Barber says:Comment » March 2nd, 2010 at 2:57 pm
James, this is genious. I'm jealous i didn't think of it first!
I really like this solution, especially when the pseudo element is positioned *above* the element instead of below in order to not conflict with the position of the UA's title rendering. The only drawback is that if title is too long, your text could wrap and obscure the content.
Add a few more CSS3 properties and your CSS3 tooltip is really slick.
a:before {
content: attr(title);
display: none;
position: absolute;
width: 15em;
top: -3em;
left: 0em;
text-align: center;
padding: .5em;
background-color: white;
-webkit-box-shadow: 0 .1em .5em #333;
-moz-box-shadow: 0 .1em .5em #333;
box-shadow: 0 .1em .5em #333;
}
a:hover:before {
display: block;
}
-
39.
[…] Tooltip with CSS3 […]
-
40.
[…] Tooltips with CSS3 […]
-
41.
[…] View Tutorial […]
-
42.
jQuery Tips, Tricks, Articles & Techniques | jQuery Guru says:Comment » January 26th, 2011 at 10:13 am
[…] Tooltips With CSS3 […]
-
43.
-
44.
@Lars: it does html5 validate if you put the tooltip into an attribute starting with “data-“
-
45.
-
46.
is what this homebrewn tooltip appears in fixed location relative to hovered elements. so you have to apply title to tiny specialized elements instead of actual elements with content, and that sucks.
practically useless, but nice case study, tho -
47.
-
48.
[…] Tooltips with CSS3. […]
-
49.
[…] Tooltips with CSS3. […]
-
50.
-
01.