0
Я построил этот совет CSS инструмент:Auto-position CSS Tooltip в соответствии с элементом?
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