I have created a tooltip using HTML and CSS that appears when hovering over an image. However, I am encountering alignment issues when placing the image next to a textbox/input as it is not inline with the input box, likely due to some absolute positioning.
<div class="box">
<ul class="list">
<li>
<label for="email"><span class="mandatoryField">* </span>Email address</label>
<input id="email" name="email" class="one-quarter" type="text" onblur="MakeLowerCase(this);"/>
<a class="tooltip" href="#"><img src="images/information.png" alt="Information" height="25" width="25"/><span class="custom info"><img src="images/information.png" alt="Information" height="48" width="48"/><em>Information</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>
</li>
</ul>
</div>
CSS:
a.tooltip {
border-bottom:1px dotted #000;
color:#000;
outline:none;
cursor:help;
text-decoration:none;
position:relative;
}
a.tooltip span {
position:absolute;
top:2em;
left:1em;
width:250px;
margin-left:-99em;
opacity:0;
text-decoration:none!important;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-moz-box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-moz-transition-property:opacity;
-moz-transition-duration:1s;
-webkit-transition-property:opacity;
-webkit-transition-duration:1s;
-o-transition-property:opacity;
-o-transition-duration:1s;
}
a.tooltip:hover span {
font-family:Calibri,Tahoma,Geneva,sans-serif;
z-index:99;
margin-left:0;
opacity:1;
}
a.tooltip.top:hover span {
top:2em;
margin-left:auto;
}
a.tooltip img {
position:absolute;
border:0;margin:-10px 0 0 -55px;
float:left;
}
a.tooltip em {
font:700 1.2em Candara,Tahoma,Geneva,sans-serif;
display:block;padding:0.2em 0 0.6em 0;
}
.custom {
padding:0.5em 0.8em 0.8em 2em;
}
* html a:hover {
background:transparent;
}
.critical {
background:#fca;
border:1px solid #ff3334;
}
.help {
background:#9fdaee;
border:1px solid #2bb0d7;
}
.info {
background:#3f97b5;
border:1px solid #2bb0d7;
color: white;
}