Sexy Tooltips with Just CSS

Jun 16 2010 by Alexander Dawson | 117 Comments

Sexy Tooltips with Just CSS

Providing supplementary information about potentially complex elements of a user interface is a central part of any website designer or developer’s workflow in creating usable and accessible websites.

One of the most common mechanisms for providing extra details beyond what you can see on the page is the tooltip (a design pattern for showing tips about a particular element on a screen).

While many innovative solutions exist using CSS and JavaScript (with and without JavaScript frameworks like jQuery), it’s sometimes useful to look towards new technologies to examine the impact they may have on our current techniques.

Thus, we’re going to look at how using the evolving CSS standard can enhance some lovely cross-browser tooltips.

Demonstration of the Sexy Tooltips

Check out the demo page of the pure CSS tooltip we’ll be creating.

Download the Sexy Tootips Source Files

If you’d like the source code to use and follow along, download it below.

Tooltips are Terrific!

Whether you need to explain an abbreviation or acronym, to define a word or if you simply want to give additional details based on what someone hovers over, tooltips provide a simple but effective solution.

From the little yellow block of text that appears over elements such as images with a title attribute (or the alt attribute if you’re unfortunate enough to use Internet Explorer), right down to the CSS and script-powered solutions that exist, they’re fantastic devices that unfortunately seem to get little interest from the design community.

WikipediaMost browsers have a default style of tooltip, though it’s not very pretty.

Leveraging Progressive Enhancement in Tooltips

As standards rapidly evolve and support for new techniques appear within browsers on a more consistent basis, the advances of CSS allow us to produce tooltips (which serve as a replacement for the somewhat boring browser defaults as shown in the image above) to a brand new level of detail and beauty.

If you already use a jQuery-powered example — fear not! — there are still many things JavaScript can accomplish which CSS cannot (like adding a delay on when tooltips disappear), but highlighting the ways we can use CSS to better equip our designs may inspire you to create some beautiful solutions of your own, outside of tooltips.

There are many existing solutions for tooltips you can choose between.There are many existing solutions for tooltips you can choose from.

What We’re Going to Make

In this example, we are going to be producing a pure CSS tooltip mechanism that is aesthetically enhanced using CSS3 (rather than using it to achieve some higher purpose).

What this means is that it will work on browsers that don’t support CSS3 (such as Internet Explorer 8 and below) — it just will not look as pretty. This concept is known as progressive enhancement.

Subtle effects such as the colors, fonts, imagery and border you give your tooltip may differ depending on the end user’s machine (such as their browser, installed fonts or monitor contrast).

CSS3 Extras

Using simple yet effective extras like the now well-established border-radius property and the box-shadow property will give what used to be a generic-looking "boxy" popups a new and more sophisticated visual appearance.

Under the Hood

As always, it makes sense to get some basic code down in your chosen source code editor and we shall begin with the HTML source code for our examples.

Different Types of Tooltips

For the benefit of giving you enough ideas to build upon or implement directly into your own work, we shall produce five different tooltips.

Each will look very similar in order to maintain a standardised appearance, but you should feel free to experiment further and continue evolving these techniques.

You can see how pretty a tooltip can actually be, much better than the default!You can see how pretty a tooltip can actually be, much better than the default at least!

Cross-Browser Compatibility

This mechanism should work across all browsers, however, if you feel the need, you can tweak it to better suit your own requirements.

Basic Markup

On the code block below, we have a generic XHTML 1.0 template with the usual <head> elements that are required.

As we add the CSS into the design, it’s worth pointing out right now that for the purpose of this tutorial, the CSS will be embedded into the document using the <style> tag.

Separating structure from style is (of course) important, I highly recommend putting your CSS into a separate stylesheet in production usage.

For ease of discussion, I decided to place the styles inside the HTML document.

I also highly recommend that if you feel that adding jQuery or other JavaScript enhancements may assist the usability of this lovely eye candy, feel free to do so!

HTML Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>ToolTips Example</title>
</head>
<body>
<h1>Examples of CSS ToolTips!</h1>
<p>Here are some examples of a <a class="tooltip" href="#">Classic<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Critical<span class="custom critical"><img src="Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Help<span class="custom help"><img src="Help.png" alt="Help" height="48" width="48" /><em>Help</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Information<span class="custom info"><img src="Info.png" alt="Information" height="48" width="48" /><em>Information</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a> and <a class="tooltip" href="#">Warning<span class="custom warning"><img src="Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a> CSS powered tooltip. This is just an example of what you can do so feel free to get creative and produce your own!</p>
</body>
</html>

Within the above code, you will notice that we have a heading (<h1>) element (nothing special so far) and a paragraph (<p>) of text which contains some anchor  (<a>) elements (with a class value of tooltip).

Why Use Anchor Tags for Tooltips?

The reason why anchors rather than abbr, dfn or another element like span is used at this level is due to IE6′s total lack of support for the :hover pseudo-selector beyond anchor elements.

Therefore, for compatibility reasons I recommend using <a>, though if you don’t like IE6, you can change it.

Each anchor also contains a span with the content of the tooltip.

With some basic HTML code, things don't look or function as they will end up.With some basic HTML code, things don’t look or function as they will end up.

The anchor effectively acts as a point of reference for the hover effect to occur within, and as we add style into the document, the content of the spans will be hidden off-screen until they’re required.

Each span in this example either has a class value of classic (denoting a general tooltip) or custom (with critical, help, info or warning to match denoting the color scheme to use).

Those using the custom style also have a couple of bonus features like the em element (denoting the overview text) and an image proceeding it (which acts as the icon for the tooltip, you can even use your own images).

Basic CSS

As you will now have the HTML on the page, it’s time we make these tooltips do their job (rather than spanning the page as normal linked text).

By adding in the code block below into your <head> element, you will give each link containing a tooltip a nice dotted underline (differentiating it from normal links which typically have a standard solid underline) and a help cursor (again for visual differentiation).

It’ll also remove the outline and set the color (so it feels less like a link and more like a general hover element).

The second bit of code simply hides the tooltips off-screen until their needed.

Easy as pie!

Basic CSS Styles for .tooltip Class

<style type="text/css">
.tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}
</style>

Web Accessibility Considerations

On a note about maintaining accessibility: the outline is removed visually as the link is effectively redundant — it’s only included for the purpose of compatibility with old versions of IE.

Therefore, the outline itself isn’t needed to show that the tooltip is a clickable link unless you want it to be, in which case I advise removing that bit of code.

Also for the benefit of screen readers, the tooltip contents are being moved using a negative margin rather than using display: none or visibility: hidden as some screen readers may ignore the content – which would be bad news for screen reader users.

It's amazing what a bit of CSS can do; now the page appears ready to host the tooltips.It’s amazing what a bit of CSS can do; now the page appears ready to host the tooltips.

CSS for Displaying the Tooltips

At this stage, hovering over the links will do nothing.

Soon we will have a functioning tooltip that will look about the same through whichever browser you prefer to use, but for now, it’s time to place the next lines of CSS code in below what you already have.

By adding in the code block that follows, you should have a mechanism that works and displays the tooltips, though it will look very bland and will have little to no appeal (visually) apart from the fact that everything is contained within a box-like shape (which sets the standard for future code to customise further).

CSS for Showing the Tooltips

.tooltip:hover span {
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 250px;
}
.tooltip:hover img {
  border: 0;
  margin: -10px 0 0 -55px;
  float: left;
  position: absolute;
}
.tooltip:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }

Star HTML Hack Necessity

You may have noticed that the very last line of code above uses the HTML star hack to apply a transparent background to IE6. Why was this included?

Well, while testing the tooltip, I encountered a strange quirk where the hover pseudo was not obeyed unless a background reference existed!

A lot of CSS later, we have something that functions generally as a tooltip!A lot of CSS later, we have something that functions generally as a tooltip!

With the above code in place, everything works and is visible on the page. But it’s hard to read because there’s no color scheme that pulls the contrast out from the page and that’s something we need to fix right now to make them usable.

CSS for Giving the Tooltips Some Color

The below code will give each of the five styles of tooltip a color scheme which fits the icon (if one exists).

Upon giving your page a quick refresh and hovering over one of the links, you’ll see a pretty tooltip that looks and works equally across the various web browsers.

Though as you will soon discover, there’s a bit more to the story still to come!

CSS for Color Scheme

.classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

With what you already have (as mentioned above), you’ll have something a bit basic, but that looks good and does its job in giving you a colourful tooltip that you can give your website design.

CSS3 for Progressive Enhancement of Sexiness

Before we leave the example, it’s worth bringing up CSS3 as we can (literally) take the edge off our tooltips, making it feel a bit less boxy using border-radius and give it a bit of extra depth using the box-shadow property.

Because neither of these elements is globally supported, it won’t work for every browser, but for those that it does work within, they’ll look a lot sleeker and sexier!

Much better! A little style gives the tooltip a visually unique appearance.Much better! A little CSS3 gives the tooltip a visually unique appearance.

Add the below code into the .tooltip:hover span selector and refresh the page.

The visual effect of the border, shadow and opacity will help lift the tooltips from the page, and that may well make the information and contrast a bit easier to read.

You’ll see that not only are the official CSS3 properties provided but the Mozilla and WebKit proprietary extensions too.

It’s worth pointing out that this means your code may not validate (even though it’s an acceptable bending-of-the-rules scenario), but the experience benefit your visitors will get may well be worth the lack of validation.

Additional CSS for Modern Browsers

border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Using some CSS3 properties, we can improve upon the existing CSS code.Using some CSS3 properties, we can improve upon the existing CSS code.

Food for Thought

As this tutorial shows, it doesn’t take much in the way of visual eye candy to give our readers a better experience.

While this style of tooltip may have been done before, adding flourishes like image-based icons, CSS3 effects and perhaps the odd bit of opacity (and typography) can help you go beyond a boxy (and rather ugly or limited) tooltip to have something a bit more elegant and pretty.

When using CSS, the key to any successful implementation is ensuring the experience degrades gracefully and what you do implement is done tastefully and with subtle enhancements.

Giving your website a few useful tooltips to notify users of the meanings of certain terms or words, explaining a general concept you talk about, or even to provide some meaningful alternative details can not only give your content some added context but it may well help your readers get more from the experience you offer them.

Perhaps the greatest thing the future of CSS offers us is a fresh opportunity to restudy and rethink our craft to better meet our users’ needs. I certainly recommend taking this example’s opportunity to look for other ways to give your content an added layer of interactivity.

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

117 Comments

Laust Deleuran

June 16th, 2010

Hi Alexander

While this is a useful method and a good walkthrough, it kind exhibits bad markup, in my opinion. As shown in the HTML Markup section of your post, the tooltips are effectively extra markup inside A-containers – which would obscure the reading of the overall sentence for people without CSS or screenreaders.

So still, even though is Pure CSS, I’d prefer using JavaScript to insert the extra markup needed for the tooltips on the fly, at the end of the document.

/Laust

Shweta

June 16th, 2010

This is very nice. Thanks for sharing!

jzigbe

June 16th, 2010

Very nice eye candy! Thanks.

Alexander Dawson

June 16th, 2010

Laust, while I agree with you in principle, the number of people who have CSS disabled (by default) pales in comparison to the number of individuals without JavaScript (by choice or otherwise). I certainly agree that pure CSS implementations of many things JavaScript does well aren’t without their own issues, but I would personally go with the JavaScript free option whenever possible (though I certainly have no issue with those who choose to enhance this method with some unobtrusive scripting).

Thanks for the feedback though, it’s much appreciated!

Jordan Walker

June 16th, 2010

Those are great looking tool tips!

John

June 16th, 2010

I totally agree with Laust. It is applying visual thinking to HTML, which is all about structure. The content is still:

“Here are some examples of a Classic This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!”

And that makes no sense.

Young

June 16th, 2010

I agree with Laust. It’s great that it’s achieved purely through CSS, but it’s pretty bulky when you compare it to say, jQuery qTip, which uses alt attributes for the tooltip content. This would look disgusting without CSS (which is uncommon but not any more uncommon than disabled JS these days I think), and I’d imagine it would also cause some SEO problems.

I’ve actually used this technique on a navigation bar to display text when the icons are hovered over. But for that, I didn’t need any extra markup because only the nav item titles were inside anyway… but other than that, I don’t think I can justify this technique. Tooltips tend to be optional content, so would you compromise clean code and extra markup just to make it look pretty? I personally wouldn’t – I don’t mind regular tooltips.

Someic

June 16th, 2010

Cool tutorial, thank you!

Alex Hall

June 16th, 2010

http://www.devseo.co.uk/examples/pure-css-tooltips/ – I’ve added some nice transitions for webkit based browsers. Hope you don’t mind me borrowing your code and adding to it!

Very nice example of CSS tooltips, the best I have seen in fact. I really like the image positioning inside the tooltip.

curtismchale

June 16th, 2010

A nice tutorial but I’d have to agree that JS is a better way to do tool tips. The default browser behaviour is to use the title tag inside a link to produce a tool tip which isn’t done here at all. The title is good for SEO and usability and should be on every link on a site.

Alexander Dawson

June 16th, 2010

@John and @Young: I’m sure that the issue of how the text appears structurally could be resolved. One method (off the top of my head) would be to make use of attribute and sibling selectors (to select the tooltips separately for style).

kream

June 16th, 2010

Thanks for the tutorial, It’s a very light solution.

Jae Xavier

June 16th, 2010

Tool tips FTW! I can’t wait to try these out.

memo

June 16th, 2010

I can’t believe these could be made only with css!

Deepu Balan

June 17th, 2010

This is really an interesting CSS technique Alexander… Very well explained too. There are many instances where SEO or Screen reader kinda stuffs are completely irrelevant, and more importance is for markup with less/no javascript. This trick can prove very useful in those cases.
Keep up the good work… way to go :-)

-deepu

web'd

June 17th, 2010

Uhm,

I think you also forgot two important points.

a) The web is about semantics. Sorry to say that but your solution is a kick in the face for this purpose.

b) In search engine results, the text above will be EXACTLY like this:

“Here are some examples of a Classic This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!”

Search engines neither use CSS nor JavaScript, but a tooltip in a title attribute would still be indexed correctly.

naspinski

June 17th, 2010

These are great, and I have been using css tooltips for a while – but be careful. More and more people are browsing on mobile devices, and on those devices, there is no :hover; therefore these tooltips are invisible – just some food for thought.

Nikos

June 17th, 2010

Nice…!!! Thanks for sharing!

Rilwis

June 17th, 2010

These tooltips are so beautiful. Very smart usage of CSS3. This tutorial can be applied immediately in many cases of design. Thanks for sharing.

Johnboy

June 17th, 2010

I agree with Laust the extra markup is not good, especially if you think of it from an SEO point of view. The stying and methods are nice, however from an SEO point of view it would probably better inserting the extra info after page load or better yet on demand.

wsvap

June 17th, 2010

plz next time make the box shadow and the png images compatible with IE6. without it, it’s worth 50% less :) btw, thx

Alexander Dawson

June 17th, 2010

@web’d: The problem with your point is the sentence would make perfect sense if the contents of each tooltip (within the span) were enclosed within brackets (both for SEO and a lack of CSS) – arguably with this in mind, brackets could be added into the example and then dealt with using a bit of extra CSS thereby removing the issue of semantics entirely.

Jacob Gube

June 17th, 2010

@wsvap: IE6 doesn’t support box-shadow and doesn’t support alpha transparencies of PNGs. But it should work, just not as cool-looking as modern browsers. I think this is sort of touched on in the Progressive Enhancement section.

Alexander Dawson

June 17th, 2010

Just as an example of how the paragraph could be displayed:

“Here are some examples of a Classic (Tooltip contents here), Critical (Tooltip contents here), …”

With a bit of grammatical savvy, such as adding brackets that are stylistically hidden or perhaps even adding the secondary title that’s emphasised using CSS generated content (avoiding the duplication issue) all issues relating to CSS disabled and SEO readability will be resolved.

That’s the great thing about code, you can improve it!

Mike Saville

June 17th, 2010

@naspinski
That’s actually not true…especially if you have a newer “full-browser” phone like Android or the iPhone. The CSS :hover pseudo class isn’t fantastic on mobile devices, but it can still work. Links are a different story because of the action fired on click, but an element (anchor included) with a :hover pseudo class will display that action on touch. I realize this isn’t the point of the article at all, but say you’re doing hover actions with Javascript, like a drop down menu – one touch will fire the hover action, and a second touch will fire the “normal” click action. Maybe that’s just my Android phone – and I apologize for my ignorance if it is.

@web’d
Actually, the web is not about semantics. Surprise! It’s about getting information to people rapidly and making their lives easier. I wholeheartedly believe in the importance of semantics, but it’s not the end-all, be-all to the web.

@the SEO people
SEO??? Do you people know what you’re talking about? Do you really think you’d be ranked lower in a given search engine simply because your copy doesn’t make logical sense? Maybe you’re thinking that’s what Google will use for the page description in the results? So what? How often does a description make sense anyway? Almost never. And what about web apps? Can we not use pure CSS tooltips in a web app that doesn’t need SEO? Think before you act like you have brains.

@alexander
Fantastic – these look great and work very well, and although I’ve seen pure CSS tooltips before, these are by far the simplest to code and easily the best looking. Also, the guy who enhanced it with some webkit transitions – very cool as well.

Ravikumar V.

June 17th, 2010

Really nice stuff!!!

ddeja

June 17th, 2010

Well everything depends on the designer. If the designer wishes to use jquery, mootools or other js stuff it’s his decision. If you want to use CSS tooltips it’s your decision too. In both cases while designing the website you have to make it good, accessible for users and browsers friendly.

From my experiance sometimes I’m trying to use so many jquery elements that there comes a time when library says no more!!!:)

So for me using alternatives like css based solutions is something natural and usefull.

Good work Alexander.

Alex Hall

June 17th, 2010

@Mike

You’re right on the tap-front with iPhone as well. I’ve got OS3 and on that the first touch is the hover (which allows for title attributes to show before you click a link and is great for tooltip scripts like this), and the second click of the link will take you to it.

Not sure when you checked my link but I’ve modified it to include transitions from the top as well as the left. And made it work in Opera too. Can’t wait for Firefox 3.6.4 when transitions can be used too!

http://www.devseo.co.uk/examples/pure-css-tooltips/

John

June 18th, 2010

This is so awesome! Thanks for this great work. Already installed it on my blog. :D

John Faulds

June 18th, 2010

Can we not use pure CSS tooltips in a web app that doesn’t need SEO? Think before you act like you have brains.

People might be talking about SEO, but one of the fundamental principles of SEO is that if you make pages that are people-friendly first, you’ve done most of what you need for the page to be search engine friendly too. And if you’re putting your readers first, you need to make sure that you don’t just throw techniques like this around because they look cool, without thinking about how your content is going to be digested by people with different capabilities, both physical and hardware/software.

So like Alex says, you need to be grammatically savvy to make sure your content still makes sense, and it’s a point that’s worth making, because otherwise people may implement this type of technique without appreciating all the consequences.

Aaron Bassett

June 18th, 2010

We already have a way of showing tooltips. It’s called the title atribute, and yes they can (sorta) be styled with CSS as well.

http://aaronbassett.tumblr.com/post/711548602/ewww-look-at-how-that-looks-without-styles

Jacob Gube

June 18th, 2010

@Alex Hall: It degrades nicely, too. Tried it in FF 3.6, and it works like Alexander’s post, but trying on Chrome 5, and it does the whole fancy animation thing. Consider submitting this to the Smashing Magazine CSS3 contest that’s running today.

Alex Hall

June 18th, 2010

As if you read my mind! I did actually consider this, but I’d feel bad submitting something that technically wasn’t my idea, so I think the author of the blog should really be the one to submit it. And he can use my enhancements if he wishes.

I’ve got another idea for the competition! :-)

Jacob Gube

June 18th, 2010

@Alex Hall: I think my comment was a hint that it’s OK to do that. I guess I shouldn’t speak for Alexander, but knowing him, I think he’d be happy if someone took his work and modified it, experimented with it, and improved on it. You can always just credit Alexander for the baseline idea.

With that said, the competition can be fierce and maybe a simple animated tooltip may not make the cut. A counter-argument to that, though, is that Vitaly (Smashing Magazine’s co-founder and chief editor) featured Alexander’s tutorial on his round-up of CSS3 techniques and tutorials. Good luck with whatever you enter into the competition, and know that you can enter more than once!

Alexander Dawson

June 18th, 2010

I’ve no problem if you want to tweak, enhance or improve upon it. I think it’s great that people reading the article are getting inspired by the example, it show’s the article is doing it’s job!

Alex Hall

June 18th, 2010

Thanks for the reply Jacob. I read the article that featured this post, nice work to Alexander there for that and based on what you’ve said I may just enter it too and see what happens with all credit going to Alexander where it’s due! On that note, can’t wait till the next update to FF that allows for the transitions to work there too (checked the spec and the code is there, so should work when the updates comes in).

Credit to you guys here for a great blog with some great tips and tutorials!

Aisha

June 19th, 2010

Wow, so cute….This task is realy challenging because it needs to attract new customers, and express their skill while they’re at it, thanks! great one.

vkwave

June 20th, 2010

Brilliant one. Thanks for sharing :)

medwezys

June 20th, 2010

@Alexander Dawson @Alex Hall : I have put your work to the Rails gem http://github.com/medwezys/css_tt to make it easier to use for lazy ror devs :) Let me know what you think

Jacob Gube

June 20th, 2010

@medwezys: Rock on! Thanks for that. I should really update these posts with cool improvements and alternative techniques that you guys keep coming up with and posting in the comments. I just figured that people always read the comments.

And I really need to make this commenting system better so that you can post code, reply, and links better.

Lubor

June 23rd, 2010

Does it work in IE 6?

Alexander Dawson

June 23rd, 2010

@Lubor: Indeed it does, give it a try and see!

Hiren Modi

June 24th, 2010

It’s good post, thanks for the post

Stevie Lee

July 27th, 2010

Alexander,
Love the design and plan on using it. But I found one issue I need help with…

In IE, if the anchor tags are stacked vertically, when hovering over an upper tag, the lower anchor tags show through the box and image.

Jonathan

August 10th, 2010

Hello,
First and fore most Lovely script. Thanks a lot. I’m having a small problem. Instead of using text how can I use images say for example “Information” text i want to use a info icon image. when I put a image it dosen’t work well. the below is the code of the image css. can someone please help me?

iInformationThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!

therealanodyne

August 13th, 2010

Hi Alexander.
You did a great work with some good thoughts.
Don’t feel bothered by all the critiques about SEO and useless texts.
First of all your tooltip texts are just examples to show what is possible.
Secondly, as mentioned by others, it cannot be important for SEO to have some well chosen tooltips on ones page.
The user experience is the most important thing imho.
To grant accessibility for everybody, also handicaped people, is important and is surely not provided with javascript generated tooltips using the title attribute.
Thirdly: I really like your approach. I had a similar one which indeed caused problems in the Presto engine browser Opera. I used display: none; and display: block; in my first version and was not content with it.
Your idea with the offset by using a high negative margin indeed solves the problem with Opera. (For IE6 I honestly don’t care anymore (IE7 and IE8 are out quite a long time now and IE9 is on the way).
Since I wanted my tooltips displayed in flowing text, I didn’t want to position it underneath the links since it would either stick to the above link text or, when with some margin (or better top: x em;), would show text in the free space. So I used the following CSS:

a.content-tooltip {
position: relative;
}
a.content-tooltip span {
position: absolute;
left: -9999px;
padding: 2px 4px;
width: 150px;
border: 1px solid #F6ECB4;
background: #0F1D39;
color: #D25B00;
line-height: 15px;
letter-spacing: 1px;
text-align: center;
}
a.content-tooltip:hover span {
position: absolute;
top: 0;
left: 103%;
}

I thought since you have to position the span tag absolute to get it out of the normal flow, you can easily set the left to a high negative value instead of using margin. With this you don’t have to put a margin: 0; in the span:hover then. Btw., modern screen readers read the tooltip anyway which is no problem when the text is well chosen.
It works brilliant in Gecko (FIREFOX) as well as in Webkit browsers (SAFARI, CHROME (IRON)) and also in Trident (IE) and Presto (OPERA).
I had a strange issue in IE7 though. When I had a break tag before my link, i.e. beginning a new line, the tooltip was displayed to high in IE7 (about 50% of the line-height).
I couldn’t figure out why, IE7 understands positioning well in all other cases.
With your system you can easily display tooltips behind and underneath links (or even other elements) and with some obstacles also on top or before. In the latter cases you had to know the exact height of the tooltip which is a bit annoying when you want to keep the tooltip flexible in terms of text length.

Anyway, thanks for the good work and for sharing it.

Peace,
Anodyne

therealanodyne

August 13th, 2010

Addendum:
I just saw a fault in my previous post, my bad.
In case of positioning the tooltip in front of the link you had to know the length of the tooltip element of course, which is possible since you defined it.

Cheers again,
Anodyne

Craig Shaw

August 19th, 2010

Thanks very much for this. A real great help.

I have a slight issue that someone might be able to help with.

I’ve used a tag for the tooltip class, and it sits within a Table Cell.

For some reason, the dashed bottom border goes right to edge of the cell, it doesn’t finish where the ends.

Any suggestions?

Thanks.

therealanodyne

August 21st, 2010

Hello Craig.
A tag ?, what tag ?, dashed border ?, on which element ?
I am not sure that anybody can understand your problem without some code or a test case on a page where the code could be looked into.

Anodyne

FavMedia

August 29th, 2010

Hey this is a super fantastic bunch of code,
1 problem in ie8 the underlying tooltips show through to the currently viewed tool tip.

if you edit the source code and put on each tool tip displaying them vertically down the page, you will see this

Spencer

September 3rd, 2010

I’m trying to figure out how to make the tooltips appear above instead of below. So far the only way I’ve figured to do this is by setting a negative value somewhere in the code but this isn’t flexible enough with different volumes of text. Any suggestions?

therealanodyne

September 4th, 2010

Hi Spencer.
It depends which element you want the tooltip appear on.
It also depends on the sizes you append to the tooltip span.
As long as you know
1. the height of the element you want to append the tooltip to
and
2. the height of the tooltip (how many lines your tooltip may contain)
it is possible to do, of course, as you said, without perfect flexibility. But it’s worth the little calculating work in order to have a tooltip without having to use javascript.
Use the code in my post above using
left 0; top -x%;
x being the value of the height of your tooltip minus the height of the containing element in percent of the height of the containing element (if it is text, may be the line-height) plus some more for an “artificial” margin.
That sounds complicated, so here an example:
The containing element would have a height of 12px, the tooltip would have a max-height of 36px (paddings and borders included): 36px – 12px = 24px which would be 200% of the height of the containing lement (12px). Add some margin and you get sth like top: -210px.
With the here discussed approach you can only have a hundred percent flexibility if you make the tooltip appear after or below the containing element. Applying the tip to bigger containers you could have them display inside of the container as well with almost 100% flexibility.
Hope that helped a bit,
cheers,
Anodyne

therealanodyne

September 5th, 2010

Addendum:
Ooops, there is a fault in my above explanation, I’m sorry.
Of course x is just the height of your tooltip element in percent of the containing element. You don’t have to substract the height of the latter.
The containing element would have a height of 12px, the tooltip would have a max-height of 36px (paddings and borders included): 36 : 12 = 3 i.e. -300% Add some margin and you get sth like top: -310px.

Sorry again,
Anodyne

Elijah

September 13th, 2010

WOW! really nice option using css3. thanks

Nikhil

September 15th, 2010

Really!!! Great piece of work!!! It inspires me to rich up my website. Thanks and Keep God Bless You!!!

Shane Horner

September 30th, 2010

Bug in IE7. Does anyone know how to fix this? In IE7 if you have a ton of these links on a page, the bubble will appear under the links. So, if the bubble appears and there is a link in the same location as the bubble, the link will appear on top of the bubble.

Help?

Pablo

September 30th, 2010

Amazing, man!!! So well explained that it’s really worth reading! I’ll use it… one way or another! ;-)

Nick

October 18th, 2010

@Shane_Horner I have run across the same bug. I’m trying to use this tooltip in a list, with each item of the list, but IE7 puts the text on a higher layer visually than the tooltip. I have not yet found a solution.

Steve Stout

October 20th, 2010

Worked great, gonna make these changes go live on my site tonight :)

To the above issue about layers, have you tried

z-index: 5;

Or something similar to make sure the tooltip is closer to the person than the links? Make sure the number of the z-index is higher than anything else.

lustmix

October 23rd, 2010

why sexy tooltips look in IE transparent? look Recent Topics on http://lustmix.com

here is CSS:

/* Tooltip */
.tooltip {
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
font-size: 1.2em;
color: #003366;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -35px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }

Marcello

November 6th, 2010

I would like to address the issue with Explorer 6 and 7 where the links are on top instead of behind the tooltips.
I was starting to pull my hair out (it is gray already)…

The only way to fix this bug is to put each tooltip link on a dedicated layer.
Assuming you have a list of

<a href="#" class="tooltip">

…statements in your html.
Create a list of CSS rules that look like the ones below:

.z50 {
	z-index:50;	
}
.z40 {
	z-index:40;	
}
.z30 {
	z-index:30;	
}

etc.

You add these rules to the links as shown below:

1st link: <a href="#" class="tooltip z50"> ...
2nd link: <a href="#" class="tooltip z40"> ...
3rd link: <a href="#" class="tooltip z30"> ...

as soon as you add these rules, Explorer 6 and 7 start behaving :-)
And the layers are stacked properly.
I tested the tooltips with IE 6,7,8 and 9, Firefox, Opera, Safari and Chrome and there are no issues.

Cheers, Marcello

TrojanMouse

November 7th, 2010

Love the script Alexander, but how would I change it to work on an IMG tag instead of a Anchor link?

Also, would it be possible to add in clipping to the browser window as I’ve got a couple of ‘info’ windows with a lot of text that extend beyond the edge of the page.

kurt

November 10th, 2010

Having the tooltip image in the markup didn’t work for me.
I put it in the css instead:

.critical { background: #FFCCAA url(Critical.png) no-repeat right top; border: 1px solid #FF3334; }

it doesn’t “popout” on the left side and I also had to get rid of the “alt” tag. but it looks OK on the top right corner.

almamun

November 11th, 2010

Wow wow wow.. just wanted to thank you Dawson (and others).

lakshmi

November 19th, 2010

its really nice, thanks for sharing

yuliaslovic

November 27th, 2010

wow cool!!
thanks for the tutorial

Tim

November 30th, 2010

Useful code Alexander! Thank you – this is simple, fast, and good looking way to do tooltips and is perfect for my lightweight web app with a targeted audience.

I also wanted say great job on graciously handling the critics. Some people can’t offer criticisms in a positive way – they only know how to tear people down. This just reflects poorly on them.

Thanks again for your article!

tommy

December 1st, 2010

This is pretty nice.

Thanks

tommy

December 1st, 2010

Ok. I tried to use it, but when I have some kind of element after the text the tooltip will appear behind that element. Look at the screenshot. I got an embedded youtube video after the text and the tooltip appears behind the video.

http://i56.tinypic.com/jigsn7.png

Any idea?

ann

December 2nd, 2010

I was having a similar problem as Marcello mentions–my links are stacked above each other and the tooltip in IE7 was displaying underneath the other tooltips.

I don’t know whether this solution will work in IE6 but it does in IE7 and it’s a little simpler:
We removed the position: relative; from .tooltips and added

.tooltip:hover {position:relative;}

Sanjay M

December 22nd, 2010

thanks a ton, this was exactly what I needed!

Adrya

January 6th, 2011

Is there a way to prevent tips from bleeding off screen when enacted on the right edge of a page?

lustmix

January 7th, 2011

@ann
thank you a lot, this trick work on IE8. http://lustmix.com

CSS is:
/* Tooltip */
.tooltip:hover {
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
font-size: 1.2em;
color: #003366;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -35px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em;}
.custom { padding: 0.5em 0.8em 0.8em 2em;}
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }

/* Tooltip */

@exander Dawson : THX you for Cool Sexy Tooltips.

Ramesh

February 16th, 2011

excellent

Jose

February 17th, 2011

Alexander. This is just Great!

Simon

February 24th, 2011

Really good work, tried many different ways, but this one is really nice.

ali

March 4th, 2011

Nice post. work at IE and Firefox. Thx.

David W

March 8th, 2011

I just wanted to say this is a great article and I really love the look of your tooltips. I did want to point out that I am running into the same problem that @Jonathan talked about on August 10, 2010 where having an image with a tooltip works a little funny.

Specifically, the image gets offset just slightly when the tooltip comes up.

Andrei

March 22nd, 2011

Very nice! Well done!

Robert

March 24th, 2011

when we are using this tooltip on image then it will be appear below the other image in ie7

Hans

April 3rd, 2011

Hi, Alex, thanks for the step-by-step instructions, looks really fine here.

I have a question: I’d like to use an image map instead of a text link to display the tooltip. Can this bes done?

Thanks a bundle!

Mottie

April 4th, 2011

You can also make tooltips for area tags by using the adjacent css selector (since area tags don’t have a closing tag) – here is a demo

HTML (borrowed from w3schools)

This is the Sun
This is Mercury
This is Venus

CSS
map { position: relative; }
area + span { position: absolute; margin-left: -9999em; }
area:hover + span {
position: absolute; /* can only be positioned relative to the entire map, not the area */
left: 155px;
top: -100px;
z-index: 99;
background: #FFFFAA;
border: 1px solid #FFAD33;
margin: 0;
width: 250px;
padding: 20px;
}

Agus

April 6th, 2011

Nice.. thank you..

Michael

April 6th, 2011

This works great, but I need it to be hidden and then shown.
Someone mouses over an image then clicks on the image and then the tooltip is shown. That the problem I’m having.
Thanks for any help.
Michael

Monique

April 11th, 2011

I used this technique but, your ui is far better than mine. I used a background image only and didn’t think to break things into types such as criticle, etc.

Great job!

Darren

April 19th, 2011

This is an excellent technique, lightweight and flexible and with good compatibility.

Of course, you will always get a few jQuery evangelists who would rather leverage an entire library to save themselves a couple of lines of code, or naysayers who claim that the only answer is the title attribute. Diff’rent strokes, innit? But this works a treat for me, and lets me format my tooltips, as I sorely needed to, in a way that wasn’t possible with titles.

Thanks!

Ralph Lawrence

May 11th, 2011

Has anyone noticed that in IE9 the floating behaves differently? The float seems to be partially hidden by some DIVs on my website.

See: http://www.erasofstyle.com/beta/

Works fine in latest FF and Chrome, but IE9 does not.

Slavi

May 18th, 2011

is it possible to have links in the tooltip ?
thanks for the sharing the code by the way

Dana

May 24th, 2011

Is there a way to stop the behavior of when clicking on the tooltip link, the user is taken to the top of the page?

Thanks

Domina

May 26th, 2011

Now, those tooltips are really sexy!

Dave

May 31st, 2011

I was wondering the same as Slavi. Is it possible to put a link in the tooltip? Thanks!

WilhelmR

June 4th, 2011

Excellent article, it’s been super useful :)

noRiddle

June 11th, 2011

@Dave
If you don’t care for IE6 anymore (I don’t), you can easily use hyperlinks within a tooltip using span and em instead of a and span.
Examples: http://hypertext-talk.de/skins/revilo_style/post_assets/css_tooltips/index.html
It is in german but you can have a look at the documented source code on the right.
The problem with tooltips appearing beneath other tooltips in IE7 can be solved with z-index: 1 on hover.

noRiddle

Samuel Murray

June 12th, 2011

G’day Alexander.
Thanks for this method, it is very much what I’ve been looking for. I’m a CSS-stealer (i.e. dumb user). I tested your code on my smartphone and they work, but the tooltips are bigger than the screen. I was wondering if it would be possible to set the width so that it never goes beyond the right edge of the screen. I mean, so that people who use smartphones with small screens can see the tooltip without it going off the edge of the screen. Do you think that that is possible?
Samuel (leuce)

Tim K

June 18th, 2011

Great tutorial, easy to understand and implement and looks great – thanks!

hadinug

June 27th, 2011

wow.. it’s easy, thanks bro..

Helix Fairweather

July 7th, 2011

I am quite a novice at this but I managed to work through all the details of setting up these tool tips. It wasn’t that hard after all!

My tooltips work very well in IE. In FireFox 5, when one hovers, nothing happens. Is there a fix for this?

Thank you,
Helix Fairweather

Dave

August 6th, 2011

Great script, thanks for sharing this.

As for the point raised regarding preferring to use JavaScript, what happens if the person has JavaScript turned off.

You will never solve all of the issues for all users, this is mainly due to the fact that everyone wants you to use their browser so build browsers using in house techniques.

“You can’t please all of the people all of the time.”

John

August 23rd, 2011

I just spent 2+ hours trying to get tooltips working from plain vanilla javascript and kept running issues with settimeout. Your post gave me an idea and it fixed my issue in under one minute and I don’t need any javascript and it works in all the browsers it has too. thanks!

Gustavo

August 25th, 2011

Excellent job!
I had a problem in IE8. My links were staying in the front of the tooltip, but i was able to make it work using

* html a:hover {
background: transparent;
z-index: 1;
}

chech

September 1st, 2011

Awesome post, thanks.

There is one but. It does not work (at least on IE7), when the tooltip goes on top of another link that has a tooltip. For example, make one link + tooltip, and make a list of 10 link+tooltip going downwards. When you hover with your mouse, the tooltip will display behind the other links, instead of on top of them. The html hack doesn’t seem to work, you can also test it in the live demo site, making your browsers width ridiculously small too see the tooltip go over another tooltiped link.

Have a nice day!

steve

September 13th, 2011

Excellent article! I have a problem. I copied and pasted the source in a new page of Expression Web and when I preview the page in IE9, I can see the tooltips but squared – without the rounded corners and without the shadow. What could be the problem? Thanks.

karl

October 2nd, 2011

I don’t need to appear the tooltips immediately. I don’t know how to make some delayed appearing of tooltips. I would appreciate delay from 0,5 to 1 second. Thanks for any suggestions.

René

October 10th, 2011

Here there is an exemple of possible way with non obstrusive html markup. I agree that Javascript do it really well. But some website has so much jquery on that when you remove them it’s the uglier website ever seen. It’s like a beautiful girl that gives you a bad surprise later in the bed.
Go take a look http://beta.rdsign.net/code/article_16 really simple tooltip but no extra html markup, but for sure it will not work everywhere.

Norja

October 14th, 2011

I think this is great! Thank you for sharing!

Shane

October 23rd, 2011

Nice tutorial!

It is possible to create a delay very easily using transitioning effects in CSS3. They should be applied to the tooltip’s main CSS rule (.tooltip).
In your CSS for the tooltip, I saw you added a great margin to the tooltip. I believe this is out-right wrong, and I would personally use the ‘display’ value instead.
Such would be achieved like:

(prepend removed)
transition: display 0s linear 1s;

This would be an immediate transition after 1 second.
If you wanted it to fade in, you would be able to use the opacity rule as well, as follows:

transition: display 0s linear 1s;
transition: opacity 2s ease-in-out 1s;

The element is hidden with an opacity of 0 to begin with. In the hover psuedo-element it is:
display:block; opacity: 1;

By doing the above two rules, the display element is removed completely then as the opacity would be 0 in the tooltip element, it will begin its fade-in after 1 second. It will take 2 seconds to fade in.
Hope someone may find this useful!

Shane Thompson

Fil

November 7th, 2011

Thanks a lot but I have the same problem than tommy.the tooltip appear behind other think.
I use wordpress for my website.
Someone can help me ?

Bill B.

November 19th, 2011

Alexander,

Some great stuff.

I have a question. Is there a way to alter the code below so that when a target is near the right-hand margin, the comment box doesn’t go off screen? If yes, what edits are necessary?

.tooltip {
color: #000000; outline: none;
cursor: default; text-decoration: none;
position: relative;
background-color: yellow;
text-indent: 0pt;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }

Thanks

noRiddle

November 21st, 2011

@Bill B.
With CSS there is unfortunately no way to adapt a tooltip dynamically to all evntualities.
You have to either prevent elements from being positioned near the edge of a page when they have a tooltip assigned (which is not always possible) or position the tooltip e.g. in the center instead of aligning it with the left or right edge of the tooltip containing element.

Since you can’t know the width of the containing element in advance, this is difficult to accomplish of course (percentages refer to the width respectively height of the containing element).

As long as the tooltip container is less or equal wide as the containing element, you don’t have a problem anyway.
So the problem only occurs when the containing element is narrower than the tooltip container, especially when it is a lot narrower.

A possible solution could be to use percentages instead of px for the position.
E.g.:

.tooltip:hover span {
position: absolute;
left: -50%; /*or right: -50%;*/
top: 110 %;
}

But an estimation on how much you have to offset the tooltip container in relation to the containing element is actually vague.
You can only play a bit around and try it out.

noRiddle

Joseph

November 26th, 2011

For some reason I have added all this info but I am having two problems:

1. The tooltip function only works in my IE 9 browser

2. I am unable to get the rounded corners to work in any browser.

If you could point me in the right direction I would appreciate it.

the website is mypcsolutions.biz

Paul

December 10th, 2011

Nice tutorials thanks.

Iwe Muiser

August 29th, 2012

Good stuff! No magic left.

Ritzee

September 2nd, 2012

Is it possible to use this as tips for area coords links on images?

Alex

May 24th, 2013

Hey Alexander,

A great tooltip placed at the rigth place on any website would enhance the user experience. Plus it has an unlimited capacity of delivering the needed information only when requested, thus the hidden divs would probably save a bunch of space from the main rendered page.
Your code is simple, intuitive and versatile. Very good.
Also I would like to mention that generally the same result could be achieved by the CSS plus (+) operator in the standard suckerfish menu, of course with the condition that the two divs to be consecutive. What do you think?

sagar v

June 9th, 2013

Hi alexander, i just want to know how facebook coded their pop up box which when we put cursor on some one’s name, a short description is pop up with links.
i know the php part.
and need only the css , java and jquery(if any) parts.
thanks

todd

June 24th, 2013

very nice but i wish it had a close option for ipad.

can’t close the popup in ipad it gets stuck in the open position

is there a fix for this?

Raymond

December 4th, 2013

Great tut man!
It works fine with my code :D

Leave a Comment

Subscribe to the comments on this article.