jQuery qTip: как прикрепить один div всплывающей подсказки к нескольким целевым div?

Обычно плагин jQuery qTip создает новый скрытый div для каждого назначенного элемента всплывающей подсказки. Есть ли способ связать один скрытый элемент всплывающей подсказки с несколькими целями, чтобы не загромождать DOM?

Надуманный пример:

<div id="foo1"></div>
<div id="foo2"></div>

<script> $("#foo1,#foo2").qTip({"content":"test"}); </script>

<!-- Creates two elements, rather than one: -->
<div class="qtip" style="display:none;">test</div>
<div class="qtip" style="display:none;">test</div>

Если qTip не может этого сделать, может ли кто-нибудь порекомендовать другой плагин всплывающей подсказки на основе jQuery, который поддерживает расширенный HTML, используя только один контейнер всплывающей подсказки? Спасибо!


jquery tooltip qtip
person Luke Dennis    schedule 04.01.2010    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Вы можете создавать блоки qTip динамически.

HTML:

<a id="some-link" href="#">Show a qTip</a>
<div id="hidden-element" style="display:none"></div>

Javascript:

$('#some-link').click(function() {
    $('#hidden-element').qtip({
        content: {
            text: '<div>Insert content here</div>',
            prerender: true  //as of beta3, this option is false by default
        },
        // etc, etc
    });

    qtip = jQuery('#hidden-element').qtip('api');
    qtip.show();

    return false;
});

Подробнее см. http://craigsworks.com/projects/qtip/docs/api. в API qTip

РЕДАКТИРОВАТЬ: 22 июня 2011 г. (просто сердито) - Начиная с beta3, qtip не выполняет предварительную визуализацию по умолчанию. 'prerender' должен быть установлен в 'true' в опции содержимого, чтобы qtip отображался динамически.

person Sam Doshi    schedule 10.01.2010

arrow_upward
2
arrow_downward

Мне нравится подсказка инструментов jQuery. Это позволяет вам определить собственную структуру всплывающей подсказки в HTML, и вы можете применить эту всплывающую подсказку к любому количеству элементов.

person zombat    schedule 04.01.2010

arrow_upward
1
arrow_downward

Вместо создания списков элементов, разделенных запятыми, используйте селектор класса. Вот пример:

$('.selectorClass').qTip({arguments:here});

Я не проверял это, но это должно работать нормально.

person Joe Mills    schedule 05.01.2010
comment
Это неправильно; выбор по идентификатору (например, $('#id1,#id2')) выполняется намного быстрее, чем выбор по классу. Для сопоставления $('.selectorClass') анализируется все дерево DOM для страницы, а для сопоставления идентификаторов выполняются два поиска с использованием вызова getElementById. - person El Yobo; 23.04.2010
comment
Я не согласен с «Эль Йобо», так как этот ответ отлично работает для меня. Вопрос не в скорости. Это связано с тем, что проще всего. - person kingchris; 04.02.2012
comment
Очевидно, что выбор по ID намного быстрее, чем выбор по классу css. Но эта проблема с производительностью относилась только к версии Internet Explorer до версии 9. Браузеры IE, начиная с версии 9, работают почти так же хорошо, как Chrome, Firefox, Opera и т. д. уже много лет. К сожалению, проблема все еще существует в крупных компаниях, где они используют Internet Explorer 8. Я уже не говорю об IE7 или IE6. Таким образом, выбор по классу CSS выполняется очень быстро в современных браузерах. - person Miklos Krivan; 07.03.2014

arrow_upward
1
arrow_downward

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

 $(".tooltipBearing").qtip({
                            content: {  
                                text: $("#tooltipDiv").html()
                            }          
                      });

Если вы не поместите туда .html(), вы увидите, что общая всплывающая подсказка появится один раз, а затем, когда вы активируете ее из другого изображения, она больше не будет работать для первого. ..

tooltipBearing — это класс, установленный для некоторых изображений на странице.

tooltipDiv – это идентификатор элемента div, содержащего содержимое всплывающей подсказки.

person WizardsOfWor    schedule 13.08.2013