0
我已经建立了这个CSS工具提示：根据元素自动定位CSS工具提示？
CSS：
.help {
position: relative
}
.help .help-text {
display: none;
background-color: #FDFCEF;
border: 1px solid #E8E5C1;
border-radius: 4px;
color: #333;
font-size: 12px;
font-weight: 400;
padding: 5px;
white-space: normal;
position: absolute;
z-index: 1000;
box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
margin-left: 60px;
margin-top: 12px;
line-height: 1.2
}
.help .help-text:after,
.help .help-text:before {
bottom: 100%;
left: 50%;
left: 13%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
.help .help-text:after {
border-color: transparent transparent #FDFCEF;
border-width: 8px;
margin-left: -8px
}
.help .help-text:before {
border-color: transition transition #E8E5C1;
border-width: 10px;
margin-left: -10px
}
.help:hover .help-text {
display: block
}
.help-text {
width: 185px
}
.help-icon {
padding-left: 3px;
color: #789cbf;
font-size: .9em!important;
vertical-align: 0!important;
cursor: help
}
.other {
display: inline
}
p.inline {
display: inline-block
}
.inline {
display: inline-block
}
.box {
font-size: .65em;
color: #FFF;
background-color: #00cc4f;
font-weight: 700;
width: 97px;
height: 18px;
padding-top: 3px;
margin-top: 5px;
padding-bottom: 4px;
text-align: center;
font-family: 'Open Sans', sans-serif;
cursor: help
}
HTML：
<table border="1">
<col style="width:128px;" />
<col style="width:216px;" />
<col style="width:280px;" />
<thead>
<tr>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p class="inline">Sample A</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
<span class="help"><div class="box">SAMPLE BOX</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
<div>aaa</div>
<div class="other">Sample B</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.</div></span>
</td>
<td>
</td>
<td><ul>
<li class="inline">Another Sample: C</li>
<span class="help">
<span class="fa fa-question-circle fa-lg help-icon"></span>
<div class="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</span>
<li class="inline">Yet Another Great Sample - D:</li>
<span class="help">
<span class="fa fa-question-circle fa-lg help-icon"></span>
<div class="help-text">r sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. bore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div>
</span>
</ul>
</td>
</tr>
</tbody>
</table>
正如你可以看到，每个样品的定位出来不同。
我希望它根据包含提示的元素进行定位。
此外，此代码是一个很好的做法？它在平板电脑上也能很好地工作吗？或者我应该修改一下吗？
另外，使用基于Java脚本的工具提示更好吗？如果是这样，哪一个与我目前最接近？
难道这就是你看：HTTPS： //jsfiddle.net/LGSon/x02exd59/1/ – LGSon
您的HTML无效。 UL只能把孩子当成LI。 –
@LGSon，是的，这看起来像我需要的一样工作。谢谢。这是一个很好的做法吗？它是跨浏览器兼容的吗？ – rockyraw