You can use attribute selectors to style an html element that contains an attribute with the value that you declare. This allows you to do a bunch of cool stuff – like style different “input” types differently, style anchor tags with titles differently, and etc.

How does it work?

An attribute selector follows this basic formula…

[attribute="value"] { style information... }

Like an id or class selector, you can use it alone (as in the example above), or attach it to a specific html element.

How can we use it? Here are a few examples.

Style Links with Title Elements Differently

You could use this to give users a hint that an anchor tag or link has a title element. This way they know to hover over the link and read the tooltip.

a[title] { border-bottom: thin dotted blue; }

That declaration gives any anchor tag containing a “title” attribute a thin dotted blue underlining. You may have to tweak it a bit to make sure the normal anchor-underlining doesn’t interfere with it.

Style Particular Input Types on Forms

You can use this to style Submit buttons, Text Inputs, etc. – independent of other input types.

input[type="submit"] {  background-color: blue; }

This simple declaration gives all Submit buttons a blue background color. Fairly silly, but the point is the declaration – not the actual styling. You could do something similar with these declarations…

input [type="text"] { /* style information */ }
input [type="password"] { /* style information */ }

Style Internal Links Different from External Links

This is a really nifty trick… but unfortunately it requires a bit of CSS 3. This will probably invalidate your CSS, and your mileage may vary.

It’s still interesting to try out.

You can use “^=” instead of “=” to signal that the browser should match any element with the given attribute that contains the quoted string. It doesn’t have to be an exact match. So you can use “^=’mydomain.com’” to match any links that point to the domain you’re working on.

Like so…

a[href^="earn-web-cash.com"] { /* style information */ }

You could use this to given internal links a slightly different color – some kind of queue to help the user differentiate between internal and external links.

For a longer list of ways to use this neat little trick, check out this post Hip to Be Square. There’s also a list of the different ways to search for values (like ^=) – which will be valid in CSS 3.

Using some simple css and a little color know-how, he shows you how to turn a square button into a pseudo 3-dimensional button. I’ll take it a step further and add a gradient background image to enhance the lighting effect. Like this…

Web Cash

We can build this button up in a couple of steps. First, we need to make our anchor tag (link) into a block – with some padding and a background.

Web Cash

a.button {
   background: #ab7f20;
   padding: .5em;
   color: white;
   text-decoration: none;
   font-weight: bold;

That gives us a nice, squarish look… kind of like a button. But it definitely looks flat and two dimensional. The next step we’re going to take is to add a gradient background. This will add a nice lighting effect – giving the button a bit of depth.

To do this, we need a background image. I made a gradient image in GIMP (read this tutorial to learn how to create a gradient image like this). Then we need to add the image to the css declaration by changing one line.

Web Cash

a.button {
   background: #ab7f20 url(uploads/2008/01/gradient-button.thumbnail.png)
     repeat-x top;

Notice that the color (#ab7f20) is the same as the second color in the gradient image. This gradient is long enough to color the whole area – but if our button gets too tall, we want it to blend in nicely.

The last thing we need to do is give it some borders – light on the top and dark on the bottom. This will give it the illusion of being hit by the light. It’ll also accentuate the effect of the gradient background image.

Web Cash

a.button {
   border-top: #f6daa3 3px solid;
   border-right: #724f05 3px solid;
   border-bottom: #724f05 3px solid;
   border-left: #f6daa3 2px solid; }
 
a.button:hover {
   border-top: #724f05 3px solid;
   border-right: #f6daa3 2px solid;
   border-bottom: #f6daa3 2px solid;
   border-left: #724f05 3px solid;
}

Notice that the background colors are flipped when you hover over the button. This gives the illusion that you are actually “pressing” the button – just by flipping the way the lighting hits.

You could also use the special “inset” and “outset” border types to cut down on that last css declaration. You lose a little control over the color and light placement, but it gives a pretty decent effect. Like this…

Web Cash

a.button {
   border: #ab7f20 3px outset; }
 
a.button:hover {
   border: #ab7f20 3px inset;}

And that’s all there is to it. Change the colors to your liking, add a custom gradient image, and you’ve got a nifty little 3 dimensional button.

All it takes is some css. No need to create a bunch of fancy images, and it’s easily expandable to accommodate the text inside of your button.

There are plenty of other times that you’d want to use a tooltip, though. If you’re wondering how, check out this previous post on how to create a custom tooltip with css.

Otherwise, read on for some thoughts on when to use these tooltips.

5. Definitions of Words

One interesting way to use custom tooltips is to show the definition of a word. This would be great for educational sites that aim to teach their users about a given subject. Rather than link to a new page with information on a word, just include a brief explanation in a tooltip.

Likewise, this could be used on coding tutorial sites to pop-up information on built-in functions and such. Hmm… do I smell a useful WordPress plug-in?

4. Movie/Book/Television Spoilers

Do you write about movies, books, or tv shows? Well, I don’t. But if you did… you might want to share spoilers and other information with your users.

The problem is that not all users want to have the ending spoiled for them. I saw a similar thing used in a forum – all spoilers had to be wrapped in a bb-code tag that made them invisible until you moused-over them.

This way users can choose whether or not to learn the ending of the story. If you leave it out on the screen, they might read it by accident and blame you for ruining the whole thing.

3. Citations and Source Quotes

Do you find yourself quoting other sources often? Maybe your blog is a bit on the literary or academic side?

You could use these tooltips to contain footnoting and citation information. Rather than clicking a link to go to the bottom of the screen (i.e. Wikipedia style), have the information pop-up on a tooltip.

I know that when I’m reading a book I’m far more likely to pay attention to footnotes that are on the same page than footnotes at the end of the chapter or book. Convenience is key.

2. Puzzle or Logic Game Tips

Do you have some kind of puzzle, quiz, or game on your website? People love a challenge… but they hate a game that’s too hard.

The solution, of course, is to offer the user hints. These can’t be readily visible, though, or it’ll spoil the game.

With the tooltip, the user can easily mouse-over some text that says “First Tip,” to get a little hint without opening up a new window. Convenient indeed.

1. Instructions and Information for Forms

I’m not a big fan of extra text hanging out on a form telling a user what to do. It seems to get in the way and detract from the look of the form.

Instead, use a tooltip over the label (or add a “?” for the tooltip) to tell the user what to enter in a field. That way you can include lots of information – so much that you might find it to be over-simplifying – and the user won’t have to read this “help” unless they actually need it.

You help the confused users without turning off the savvy ones.

What Else?

I’m sure there are dozens of other ways to use custom tooltips. Got some ideas?

Then leave a comment. I’d love to hear how you’d use them.

You can achieve a tooltip like that on any anchor text by defining a “title” attribute. However, it will also be bland, yellow, and un-styled. You can’t control the size of the box, style of the font, or the general appearance of the tooltip at all.

But there’s a better way. This tutorial will show you how to create custom tooltips using simple, valid HTML and CSS. Once you’ve created the basic tooltip, you can style it to your heart’s content.

Before diving into the code, we should take a look at the CSS/HTML mechanics that we’ll need to build this thing. If you feel confident that you know everything… then feel free to skip ahead. Otherwise, read along.

First, let’s take a look at our goal. We need to…

• Create a box to hold the tooltip.
• Make the box invisible.
• Make the box visible once we mouse over our target text.
• Make the box appear “above” the page, instead of inline with the page.

Now It’s Here, Now It’s Not – Pseudo Classes

In order to make our box appear and disappear, we need to use a little html/css magic called pseudo-classes. Without these, we’d have to use javascript to detect when we mouse-over the target text.

Anchors (<a>) tags have a few built in pseudo classes – a:visited, a:active, and a:hover. This allows you to style different types of anchors differently. For example, an anchor tag will usually change color when you hover over it.

We’re going to use this to make our box appear and disappear. The box will initially be invisible. Then, using the a:hover pseudo-class, when we hover over the anchor tag the box will become visible.

Creating a Box – Holding the Tooltip

In order to display our tooltip and make it appear and re-appear, we need to create a container for it. Then we need to position it.

What’s the natural container tag? A <div>. Unfortunately, Internet Explorer doesn’t like the <div> tag, so we’ll use a <span> tag instead. To hell with semantics. It’s still valid html.

Initially, this <span> is going to be styled with display:none. Then, when the a:hover becomes active, it will switch to display:block.

We also need to position the span so that it appears “above” the rest of the page. We’ll need two css attributes to do this. First, we’ll give the anchor a position:relative declaration. Then, we give our span a position:absolute declaration.

This will make the tooltip hover above the rest of the page – and it’s position will be based on the relative position of the anchor text.

Building the HTML and CSS

Now that we know the basic building blocks, let’s look at the actual markup.

Here’s the HTML you would use to create the tooltip.

<p>Here’s some more sample text.  This 
  <a class='info'>anchor<span>CSS tooltip.  We 
  can style this!</span></a> has a css-based tooltip
  that we can style to our liking.</p>

There’s three basic elements here. The regular text – enclosed in a p tag. Our target text is enclosed in an anchor tag with class “info.” The actual tooltip is in a <span> tag inside the anchor tag.

Now, let’s look at the css necessary to make the tooltip magic work. This is the barebones version – we’ll style it a bit later.

a.info span {
    display: none;
}
 
a.info:hover {
    position: relative;
}
 
a.info:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

This sets up what we discussed before. The tooltip <span> is initially invisible. Since it’s inside the anchor tag, we can use the a.info:hover span declaration to style the <span> differently when the anchor is hovered over – and then we make the <span> appear.

Voila! Tooltip.

Mouse over this textThis is the barebones tooltip. to see what we’ve built so far.

At this point, you’ll probably see a blur of text appearing on top of some other text. Not very readable… but that’s because we haven’t styled it yet.

Mouse over this textNow this has a bit of styling. to see a slightly styled tooltip.

We added a few things here – I styled the basic a.info so that it had a different color and no text-decoration. Then I styled the span with a bunch of stuff – background color, border, text color, width, and padding.

I also used position:top to offset it 1.5em from the top-left of our anchor, and position:left to offset it 1.5em from the top-left of our anchor.

Here’s the new css…

a.tooltip {
color: gray;
text-decoration: none;
}
 
a.info span {
display: none;
}
 
a.info:hover {
position: relative;
}
 
a.info:hover span {
display: block;
position: absolute;
top: 1.5em;
left: 1.5em;
background-color: #eeeeee;
border: thin solid black;
color: black;
width: 12em;
padding: .5em;
}

And that’s about all there is to it. With the html and css you built in this tutorial, you’ve got the mechanics needed to build your own tooltip.

It’s up to you to style it according to your site’s theme and make it pretty. You could add a gradient background, style the font for some extra spacing and/or size, set the width to the way you want, and more.