Подсказка справки соответствия - PullRequest
Новая
       2

Подсказка справки соответствия

1 голос
/ 05 сентября 2011

Я пытаюсь использовать qTip2 для отображения текста справки, когда пользователь наводит курсор на мою иконку helpicon3 рядом с тремя элементами ввода текста на моей веб-странице.

Каждому созданному элементу я предварительно назначилТекст всплывающей подсказки, который я хочу отобразить для этого элемента, когда пользователь наводит курсор мыши на подсказку для этого элемента ввода, то есть: 

<span class="itemToolTip" foritem="P35_TEST">This is some help text from the help section of the item.</span>
<span class="itemToolTip" foritem="P35_A1">This is some help text for A1 item</span>
<span class="itemToolTip" foritem="P35_B1">This is some help text for B1 item</span>

o, основываясь на этом, когда я наводю курсор на подсказку «P35_A1», используя qTip2Я бы увидел текст всплывающей подсказки «Это какой-то текст справки для элемента А1».То же самое относится и к двум другим элементам.

Код для этого, который я извлек из моего источника просмотра моей страницы, выглядит следующим образом: 

<label for="P35_TEST"></label>
<td  colspan="1" rowspan="1" align="left"><input type="text" name="p_t04" size="30" maxlength="2000" value="" id="P35_TEST" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td>
<label for="P35_A1"></label>
<td  colspan="1" rowspan="1" align="left"><input type="text" name="p_t05" size="30" maxlength="2000" value="" id="P35_A1" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td>
<label for="P35_B1"></label>
<td  colspan="1" rowspan="1" align="left"><input type="text" name="p_t06" size="30" maxlength="2000" value="" id="P35_B1" /><td colspan="1" rowspan="1" align="top"><div id="helpicon"><img src="helpIcon3" border="0" alt="" style="cursor:normal" /></div></td>

Теперь код jQuery с qTip2то, что у меня есть и не работает, приведено ниже.

Очевидно, это часть текстового контекста, с которой у меня возникают проблемы, потому что я пытаюсь сделать с помощью функции .each соответствие значку справки элемента, с которым я нахожу указатель мыши.Приведенная выше справка для элемента itemtooltip появляется в моей всплывающей подсказке. 

$(document).ready(function() {
   $('span.itemToolTip').each(function(i){
     $('#helpicon').qtip({
         content: {
            text: $('label[for="' +  $(this).attr('foritem') + '"]').attr('title',$(this).html())
         },
         style: {
            classes: 'ui-tooltip-dark ui-tooltip-rounded',
            height: 5,
            width: 100
         },
         position: {
            my: 'bottom center',
            at: 'top center',
            viewport: $(window)
         }
     });
  });
});

Опять же, если навести указатель мыши на подсказку "P35_TEST", используя qTip2, я бы увидел текст всплывающей подсказки.элемент. "

В настоящее время я пытаюсь сопоставить подсказку метки с фактическим текстом всплывающей подсказки.В дополнение к этому, есть ли другое средство, которое также использует qTip2?

Ответы [ 2 ]

1 голос
/ 07 сентября 2011

Несколько вещей, которые следует учитывать:

  • Все ваши DIV имеют одинаковый идентификатор, что является недопустимой разметкой.
  • Вам следует переключиться на порядок обработки чаевых.Другими словами, после того, как вы исправили проблему с DIV ID, вы должны зацикливаться на триггерах всплывающих подсказок, а не на держателях всплывающих подсказок.переписываю некоторое время назад и публиковал об этом в этой теме на форумах qTip2.Вторая ссылка показывает, как именно выполнить то, что вы просите:

    Использовать содержимое подсказки из уникального, скрытого элемента DIV на странице с атрибутом ID, основанным на * 1015 триггера.*

    HTML: 

    <ul>
    <li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li>
    <li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li>
    <li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li>
</ul>

<div style="display: none;">
    <div id="data_tooltip_1">
        data_tooltip_1: You can hover over and interacte with me
    </div>
    <div id="data_tooltip_2">
        data_tooltip_2: You can hover over and interacte with me
    </div>
    <div id="data_tooltip_3">
        data_tooltip_3: You can hover over and interacte with me
    </div>
</div>

    Javascript: 

    $(document).ready(function() {
    $('.tooltip[id^="tooltip_"]').each(function(){
        $(this).qtip({
            content: $('#data_' + $(this).attr('id')),
                show: {
            },
            hide: {
                fixed: true,
                delay: 180
            }
        });
    });
});

    Ключ здесь с именами ваших элементов.Каждый идентификатор имеет стандартный префикс «tooltip_» и «data_tooltip_», за которым следует уникальный числовой идентификатор.Затем в селекторе мы специально ищем элементы, которые имеют связанный префикс.

0 голосов
/ 05 сентября 2011

Почему бы вам просто не иметь текст, который вы хотите отобразить в качестве атрибута title каждого из ваших значков справки, а затем сделать (при условии, что у каждого "helpicon" есть класс helpicon) (не проверено) 

$(document).ready(function() {
    $('.helpicon').each(function(i){
       $(this).qtip({
           content: {
               text: $(this).attr('title')
           },
           style: {
               classes: 'ui-tooltip-dark ui-tooltip-rounded',
               height: 5,
               width: 100
           },
           position: {
               my: 'bottom center',
               at: 'top center',
               viewport: $(window)
           }
       });
   });
});
...