tippy 插件无法显示包含 HTML 内容的多个工具提示

Question

我有一个这样初始化的 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"是一个TABLE中的几个按钮（每行一个按钮）。

在运行页面之后，只有最后一行显示了包含 HTML 内容的工具提示。所有其他行显示工具提示，但为空。

有办法解决吗？

请参阅此 Fiddle 问题：

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

Answer 1

当您调用 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)
                });
  });
});

tippy 插件无法显示包含 HTML 内容的多个工具提示

tippy plugin cannot show multiple tooltips with HTML content

jquery

tippyjs