我有一个以这种方式初始化的 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 内容的工具提示。所有其他行都显示工具提示,但为空。
有办法解决吗?
请参阅此问题的Fiddle:
最佳答案
当您调用tippy函数时,JavaScript首先评估您的参数。最重要的是,options 对象的 content 属性将被评估:
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)
});
});
});
关于jquery - Tippy 插件无法显示带有 HTML 内容的多个工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53178079/