Я новичок в jQuery и просматриваю и просматриваю примеры. У меня есть плагин qTip2, который мне очень нравится. См.: http://tcb.cbmiweb.com/foundation/test1.html. Внизу, пожалуйста, наведите ссылку уровни обслуживания, чтобы вывести данные таблицы в постоянную всплывающую подсказку.Результат моделирования qTip2 отличается от запланированного
Я знаю, в общем то, что происходит здесь, и мне нравится стиль дисплея (особенно шрифты, чередуя оттенки для строк и границы). Я искал вокруг и не могу, как это делается. Я подозреваю, что: <tr data-browser="ie" class="odd gradeX"> помогает достичь результата, но не уверен.
Самое главное, однако, моя неспособность получить тот же результат на соответствующей странице (см: http://tcb.cbmiweb.com/UIForms/Subscribing.aspx# - снова парит над ссылкой уровни обслуживания
When. Я смотрю на свой код, обе страницы должны быть одинаковыми, но ясно, что это не так. Выходы одинаковы для Chrome, FF и IE11, и я немного поработал с инструментами для разработчиков.
Итак, моя цель заключается в том, чтобы сделать всплывающую подсказку для этого на странице «Подписывание» так же хорошо, как на первой странице (test1.html). Пожалуйста помоги мне с этим.
EDIT - UPDATE: добавление фрагментов кода, связанные с test1.html (желаемый вид):
#pricetable th td{
text-align:center;
}
.myInlineQtipCenter{
text-align:center;
}
.myCustomClass{
border-color: rgb(0,190,0);
background-color: #ddd;
}
.myCustomClass .qtip-content{
font-size: 18px;
}
.myContainer {
background-color: #FCF6CF;
/* width:100%; */
border: 5px solid white;
margin-bottom: 1%;
}
.tooltiptext{
display: none;
}
Разметка внутри test1.html:
<a id="myLink" href="#">levels of service</a>
<div class="tooltiptext">
<table id="pricetable" cellpadding="0" cellspacing="0" border="0" width="100%" >
<thead>
<tr>
<th class="myInlineQtipCenter">Edition</th>
<th class="myInlineQtipCenter">Maximum Users</th>
<th class="myInlineQtipCenter">Annual Cost</th>
</tr>
</thead>
<tbody>
<tr data-browser="ie" class="odd gradeX">
<td class="myInlineQtipCenter">Home</td>
<td class="myInlineQtipCenter">2</td>
<td class="myInlineQtipCenter">$36.00</td>
</tr>
<tr data-browser="ie" class="odd gradeX">
<td class="myInlineQtipCenter">Small Business</td>
<td class="myInlineQtipCenter">5</td>
<td class="myInlineQtipCenter">$120.00</td>
</tr>
<tr data-browser="ie" class="odd gradeX">
<td class="myInlineQtipCenter">Enterprise</td>
<td class="myInlineQtipCenter">unlimited</td>
<td class="myInlineQtipCenter">$250.00</td>
</tr>
</tbody>
</table>
</div>
сценария в нижней части test1 .html:
$('a#myLink').each(function() {
$(this).qtip({
content: {
text: $(this).next(".tooltiptext"),
title: { text: 'Service level pricing:',button: true}
}
,
style: {classes: 'qtip-youtube qtip-close myCustomClass'}
,
position: {
my: 'top left',
at: 'bottom center'
}
,
events: {
hide: function (event, api) {
if (event.originalEvent.type !== 'click')
return false;
}
}
});
});
Опять же, приведенный выше код на странице test1.html работает так, как хотелось бы. Код на странице «проблема» почти точно такой же. Как сделать второй вывод всплывающей подсказки похожим на первый. Надеюсь, этот вопрос станет ясным, и кто-то изменит направление DownVote. Я не пытаюсь лениться. Я могу опубликовать больше кода на странице проблемы.
Уровни служебной подсказки работают для меня на хроме ... Я думаю, o.O –
Я был огромным поклонником qTip2, но считаю, что они выглядят утомительно, громоздко и непоследовательно в браузерах. С тех пор я перешел в Tooltipster, который намного проще из коробки. – Sparky
@ Мишель - спасибо за ваши усилия. По комментариям, которые вы добавили при вставке изображений, я думаю, вы меня неправильно поняли. Теперь первое изображение из test1.html показывает «хорошую» подсказку с полосками и шрифтами «зебра». Второе изображение, которое вы добавили, показывает весь экран, а черная подсказка внутри не показывает полосы зебры и т. Д. Я понятия не имею, как полоса попала туда, и если бы я знал больше об этом, возможно, я мог бы воспроизвести внешний вид на странице «Подписка». –