0

我使用 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;
}
4

4 回答 4

2

检查此演示 可能对您有用

CSS 工具提示

于 2013-07-26T10:29:16.433 回答
1

是下面的类导致了问题......

演示

a.tooltip img {
   position:absolute;
   border:0;
   margin:-10px 0 0 -55px;
   float:left;
}

所以用这个来修复

a.tooltip img.static {
    position: static;
    float: none;
    margin: 0;
    vertical-align: top;
}

您需要在标签class="static"上使用（您可以使用任何名称） 。img

我想建议你清理你的代码，因为它太乱了。

于 2013-07-26T10:24:03.273 回答
1

设置位置：相对；在你的锚类工具提示 中删除top:2em; 从a.tooltip 跨度

希望这会奏效。

谢谢

于 2013-07-26T10:26:58.177 回答
1

您正在使用很多负利润。IE

...    
margin-left:-99em;
...
margin:-10px 0 0 -55px;

如果您已经知道图标的大小，则可以设置顶部和左侧而不使用相对值

演示

于 2013-07-26T10:29:14.467 回答