.: XHTML & CSS Gallery :.
Simple Tooltip with Image
HDR Photo of a Dutch Farm. Please click on image for larger photo.
Photo © wouter's designs.
The XHTML code is as follows:
<p>
<a class="tooltip" href="#">
<span>
<img src="../wd-images/wd-tooltip.gif" alt="tooltip" title="tooltip" /><br />
In image processing, computer graphics and
photography, high dynamic range imaging (HDRI or just HDR) is a set of techniques
that allows a greater dynamic range of luminances between light and dark areas of a scene than normal
digital imaging techniques. <br /><br />The intention of HDRI is to accurately represent the wide range of intensity
levels found in real scenes ranging from direct sunlight to shadows.
</span>
This is a tooltip explaining the meaning of HDR.
</a>
</p>
And here is the CSS code you will need:
.tooltip{
position:relative; /*this is the key*/
z-index:24;
background-color:#CFD7EC;
color:#020446;
text-decoration:none;
font-weight:bold;
}
a:link.tooltip{
color:purple;
text-decoration:none;
padding:3px;
font-weight:bold;
}
a.tooltip:hover{
z-index:25;
background-color:#C3CBE0;
color:purple;
cursor:help;
font-weight:bold;}
a.tooltip span{display: none;
}
a.tooltip:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:35em;
padding:1em;
border:3px double #465081;
background-color:#F4F1DE;
color:#020446;
text-align: justify;
font-weight:normal;
font-variant:normal;
}
Last updated:
© copyright: wouter's designs.
This document may not be translated, duplicated, redistributed or otherwise appropriated.