Have you ever wondered how to create tootips uisng CSS only. I had a problem before when I was tasked to create tooltips in a website and imemdiately I had thought of using Javascript as thats what I am used to but to my surprise that website blocks any JavaScripts. So the next best thing is to use CSS, to show you how to achieve that here is a simple example. All you need is 2 images, 1 for the main background which covers the top and bottom part of the tooltip and another for the stretching background.
Here is the code to achieve it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Tooltips Sample</title>
<style type="text/css">
a.myToolTip
{
position: relative;
color: #767676;
font-weight: bold;
text-decoration: none;
}
a.myToolTip span
{
display: none;
}
a.myToolTip:hover
{
color: red; background:;
}
a.myToolTip:hover span.tooltip
{
/* opacity with different browsers */
filter: alpha(opacity:70);
KHTMLOpacity: 0.70;
MozOpacity: 0.70;
opacity: 0.70;
width:200px; /* width of the tooltip, if you adjust this you need to adjust the width of your image as well*/
color: #000000; /* tooltip text color */
text-align: center; /* tooltip text alignment */
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
}
a.myToolTip:hover span.top
{
padding: 30px 8px 0; /* top padding */
display: block;
background: url(tooltip.gif) no-repeat top;
}
a.myToolTip:hover span.middle
{
/* different middle bg for stretch */
padding: 0 8px;
display: block;
background: url(tooltipfiller.gif) repeat bottom;
}
a.myToolTip:hover span.bottom
{
padding: 3px 8px 10px; /* bottom padding */
display: block;
background: url(tooltip.gif) no-repeat bottom;
}
</style><body>
<div id="container">
<a href="#" class="myToolTip">
Mouse Over
<span class="tooltip">
<span class="top"></span>
<span class="middle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras sit amet velit a arcu condimentum fermentum.
Pellentesque est sapien, sollicitudin pretium accumsan sed, mollis quis leo.
Sed ac vehicula lacus. Nulla ac massa eu felis mollis pulvinar sit amet vel eros.
In ultrices facilisis lorem, quis semper lorem gravida vitae.
</span><span class="bottom"></span></span></a>
</div>
</body>
</html>And here are the images:
I pasted your code into an empty MS Expressions source code page, previewed in IE8 and….. nada, nothing, no tooltips. Are you sure this code works?
hum….
Could not get it to work. Browser compatability?
Browser compatibility? Er, with IE8? Without wishing to get into a pointless debate about standards vs. IE, if it doesn’t work with the browser that has >90% or whatever share it doesn’t work, does it?
(I won’t respond to any further postings, other than to apologise to the author if, for some reason, I got something wrong in originally pasting in his code into my text editor. Fact is, the code looked really useful, so I hope it is either my mistake or the code can be corrected to work correctly.)
Sorry my mistake, I uploaded the wrong image. Now rectified. Also theres a clash in my naming as I am using tooltip as my class name as well as in span.tooltip. Also I noticed when I copy and paste any word with class in the tag it is removed here in WordPress unless you manually type it, might be a form of security to prevent injection. Anyways thanks for the comment! And thats the updated code now, it works in FF and IE havent tried in Chrome and Opera