плагин tippy не может отображать несколько всплывающих подсказок с содержимым HTML - PullRequest
Новая
       7

плагин tippy не может отображать несколько всплывающих подсказок с содержимым HTML

0 голосов
/ 06 ноября 2018

У меня есть плагин tippy, инициализированный таким образом: 

tippy('.tooltip_commands', {
                    delay: 100,
                    arrow: true,
                    arrowType: 'round',
                    size: 'large',
                    duration: 500,
                    animation: 'scale',
                    placement: 'left',
                    interactive: true,
                    trigger: 'click',
                    content: document.querySelector('#tooltip_content').cloneNode(true)
                });

Где "tooltip_content": 

<div class="tooltip_templates">
    <div id="tooltip_content">
        <ul class="list-group">
            <li class="list-group-item">
                <a id="_bajarFactura" href="#" title="Bajar factura"><i class="sl-icon-cloud-download"></i>Bajar factura original</a>
            </li>
            <li class="list-group-item">
                <a id="_verFactura" data-toggle="modal" href="#myModal" title="Ver archivo de la factura"><i class="sl-icon-doc"></i>Ver factura original</a>
            </li>
            <li class="list-group-item">
                <a id="_verDetalle" href="#" title="Ver detalles de la factura"><i class="sl-icon-magnifier-add"></i>Ver Detalle</a>
            </li>
            <li class="list-group-item">
                <a id="_reEnviar" href="#" title="Re-enviar factura a un e-mail"><i class="icon-Mail-Forward"></i>Re-enviar</a>
            </li>
        </ul>
    </div>
</div>

И "tooltip_commands" - это несколько кнопок в ТАБЛИЦЕ (по одной кнопке для каждой строки).

После запуска страницы только в последней строке отображается всплывающая подсказка с содержимым HTML. Во всех остальных строках отображается всплывающая подсказка, но пустая.

Есть ли способ ее решить?

Пожалуйста, посмотрите эту скрипку с проблемой:

https://jsfiddle.net/desytec/ym4nubhw/21/

1 Ответ

0 голосов
/ 06 ноября 2018

Когда вы вызываете функцию tippy, JavaScript сначала оценивает ваши аргументы. Самое главное, свойство content объекта options будет оценено: 

document.querySelector('#tooltip_content').cloneNode(true)

Это выражение будет оцениваться как единственная копия элемента # tooltip_content . Затем Tippy попытается назначить одну и ту же копию всплывающей подсказки для каждого всплывающего окна.

Чтобы ваш пример работал правильно вам необходимо создать элемент контейнера всплывающей подсказки для каждой создаваемой подсказки . Я бы сделал это с помощью jQuery loop , но есть и много других решений: 

$(document).ready(function () {
  $('.tooltip_commands').each(function(){
                tippy(this, {
                    delay: 100,
                    arrow: true,
                    arrowType: 'round',
                    size: 'large',
                    duration: 500,
                    animation: 'scale',
                    placement: 'left',
                    interactive: true,
                    trigger: 'click',
                    theme: 'honeybee',
                    content: document.querySelector('#tooltip_content').cloneNode(true)
                });
  });
});
...