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

Answer 2

下面的课程引起了这个问题......

Demo

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（您可以使用任何名称）。

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

Answer 3

在您的锚类工具提示中设置位置：相对; 从 a.tooltip span

中删除 top：2em;

希望这会奏效。

由于

Answer 4

你正在使用很多负利润。即

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

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

Demo

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

4 个答案: