Viewing Thread:
"[CSS] Another Way To Do Tool Tips"

This should be short and sweet I hope. We've all seen javascript pop-ups I guess, and even use of the title attribute that pops up text when you hover over a link for a while. There is a method to do something similar with CSS only though. The benefit of this approach is that your content isnt fragmented onto another page (as with the javascript approach) and you can put alot more in your tooltip then just text (as with the title attribute).

So we start with some HTML that'll contain the tooltip.

This is <a>my tooltip
<span>This is the information in my tooltip</span>
</a> and when I hover over it hopefully my span will display.

The aim is that the default will be that everything in the span is hidden initially and only appears when I hover over the "my tooltip" text.

.tooltip {
border-bottom:1px #000 dotted;
}

.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
}

And you can see the effect this.
It looks how it should at least, my span is hidden but when I hover over it, the span appears and breaks the flow of the content.
To fix this I need to use the position property to move the span outside of the normal page flow. I'll do that by setting its position to absolute. And I'll take the opportunity to style my tooltip box too by apply a border and a background colour.

.tooltip {
border-bottom:1px #000 dotted;
}

.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
position:absolute;
border:1px solid #851218;
background-color:#fdd9db;
padding:3px;
}

If you look at this, you basically have a working tooltip. What I want to do though is make things tidier by repositioning it. I've already set my span to position:absolute though. If I set top & left now they'll be set in relation to the start of the document, where as I want to position things relative to my tooltip text. The solution to this is to set its parent to position:relative.
Another problem I might have is the order in which content appears. If I've got images on my page then its possible they'll appear over my visible tooltip (especially in older browsers). I can safeguard against this by setting a z-index on my tooltip and incrementing it when the user hovers over it.
So I have...

.tooltip {
position:relative;
border-bottom:1px #000 dotted;
z-index:50;
}
.tooltip:hover {
z-index:99;
}
.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
position:absolute;
border:1px solid #851218;
background-color:#fdd9db;
padding:3px;
top:2em;
left: 2em;
width:10em;
z-index:100;
}

My tooltip now appears below the text and just to the right. I've also set a width on my tooltip as well. You can see my working tooltip here.

To get this working on older versions of IE, you'll need to specific a href attribute in your link tag. And then remove the text decoration and reset the font color. In addition the hover wont trigger unless you define .tooltip:hover to do something. And my final code is...

.tooltip {
position:relative;
border-bottom:1px #000 dotted;
text-decoration:none;
color:#000;
z-index:50;
}
.tooltip:hover {
border-bottom:1px #851218 dotted;
z-index:99;

}
.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
position:absolute;
border:1px solid #851218;
background-color:#fdd9db;
padding:3px;
top:2em;
left: 2em;
width:10em;
z-index:100;
}

which you can see in action here.

None of the above is terribly complicated. But once you know the technique and how to replicate it, you can create some interesting effects. Such as

Some miscellaneous images that automically zoom in when hovering over them

A bit more advanced use of css selectors but same principle as the tooltip

This should be short and sweet I hope. We've all seen javascript pop-ups I guess, and even use of the title attribute that pops up text when you hover over a link for a while. There is a method to do something similar with CSS only though. The benefit of this approach is that your content isnt fragmented onto another page (as with the javascript approach) and you can put alot more in your tooltip then just text (as with the title attribute).

So we start with some HTML that'll contain the tooltip.

This is <a>my tooltip
<span>This is the information in my tooltip</span>
</a> and when I hover over it hopefully my span will display.

The aim is that the default will be that everything in the span is hidden initially and only appears when I hover over the "my tooltip" text.

.tooltip {
border-bottom:1px #000 dotted;
}

.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
}

And you can see the effect this.
It looks how it should at least, my span is hidden but when I hover over it, the span appears and breaks the flow of the content.
To fix this I need to use the position property to move the span outside of the normal page flow. I'll do that by setting its position to absolute. And I'll take the opportunity to style my tooltip box too by apply a border and a background colour.

.tooltip {
border-bottom:1px #000 dotted;
}

.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
position:absolute;
border:1px solid #851218;
background-color:#fdd9db;
padding:3px;
}

If you look at this, you basically have a working tooltip. What I want to do though is make things tidier by repositioning it. I've already set my span to position:absolute though. If I set top & left now they'll be set in relation to the start of the document, where as I want to position things relative to my tooltip text. The solution to this is to set its parent to position:relative.
Another problem I might have is the order in which content appears. If I've got images on my page then its possible they'll appear over my visible tooltip (especially in older browsers). I can safeguard against this by setting a z-index on my tooltip and incrementing it when the user hovers over it.
So I have...

.tooltip {
position:relative;
border-bottom:1px #000 dotted;
z-index:50;
}
.tooltip:hover {
z-index:99;
}
.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
position:absolute;
border:1px solid #851218;
background-color:#fdd9db;
padding:3px;
top:2em;
left: 2em;
width:10em;
z-index:100;
}

My tooltip now appears below the text and just to the right. I've also set a width on my tooltip as well. You can see my working tooltip here.

To get this working on older versions of IE, you'll need to specific a href attribute in your link tag. And then remove the text decoration and reset the font color. In addition the hover wont trigger unless you define .tooltip:hover to do something. And my final code is...

.tooltip {
position:relative;
border-bottom:1px #000 dotted;
text-decoration:none;
color:#000;
z-index:50;
}
.tooltip:hover {
border-bottom:1px #851218 dotted;
z-index:99;

}
.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
position:absolute;
border:1px solid #851218;
background-color:#fdd9db;
padding:3px;
top:2em;
left: 2em;
width:10em;
z-index:100;
}

which you can see in action here.

None of the above is terribly complicated. But once you know the technique and how to replicate it, you can create some interesting effects. Such as

Some miscellaneous images that automically zoom in when hovering over them

A bit more advanced use of css selectors but same principle as the tooltip