CSS Tooltip Extravaganza - All Ways To Hide & Show Elements With CSS Tutorial

Personally, I would probably use Tooltip #1 about 99% of the time. However, with CSS, I've learned not to assume anything. So I'm sure there are some situations where the other Tooltips (i.e. Tooltips 2 - 5) might be more fitting. Plus, I had fun seeing how many different ways this could be accomplished! All five Tooltips work perfect in all browsers from IE6 and up! The HTML is the same for all the Tooltips so I will only list it once. And IE6 has a hover bug that needs to be squished. So in my above linked example, I just placed a:hover{visibility:visible;} once in the top anchor rules which takes care of all the Tooltips.

The html

<a href="#" class="tooltip"><span>Tooltip!</span>Tooltip</a>

All Tooltips

a:hover span, a:focus span {
padding:10px 15px;  
border:2px solid #000;
background:#999;
border-radius:6px;
box-shadow:0 0 6px #000;
opacity:0.8;
}

Tooltip #1

.tooltip { 
position:relative;
} 
.tooltip span { 
position:absolute;
left:-999em; 
} 
.tooltip:hover span, .tooltip:focus span {
left:105px;
}

Tooltip #2

.tooltip { 
position:relative;
} 
.tooltip span {
position:absolute; 
display:none;   
} 
.tooltip:hover span, .tooltip:focus span {
display:block;
left:105px;
}

Tooltip #3

.tooltip { 
position:relative; 
} 
.tooltip span { 
position:absolute;
visibility:hidden;  
} 
.tooltip:hover span, .tooltip:focus span {
visibility:visible;
left:105px;
}

Tooltip #4

.tooltip { 
position:relative;
} 
.tooltip span { 
position:absolute;
overflow:hidden;
width:0;
} 
.tooltip:hover span, .tooltip:focus span {
overflow:visible;
width:auto;
left:105px;
}

Tooltip #5

.tooltip5 { 
position:relative;
} 
.tooltip5 span { 
position:absolute;
text-indent:-999em;
} 
.tooltip5:hover span, .tooltip5:focus span {
text-indent:0;
left:105px;
}

Tooltip #6

.tooltip6 { 
position:relative;
} 
.tooltip6 span { 
position:absolute;
z-index:-1;
} 
.tooltip6:hover span, .tooltip6:focus span {
left:105px;
z-index:1;
}

ADVERTISE HERE