jquery - 无法对齐输入/标签字段旁边的工具提示

Question

我使用 HTML 和 CSS 开发了一个工具提示。将鼠标悬停在图像上时会触发工具提示。但是，当我将图像放在文本框/输入框旁边时，它并没有与输入框对齐，这可能是因为有一些绝对定位。

<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;
}

Answer 1

查看此演示可能对您有用

CSS TOOLTIP