未来元素的工具提示插件?
tooltipster plug in for future elements?
我正在使用 tooltipster 在我的页面中添加一些样式化的工具提示,但我也希望它们也显示在动态生成的元素上,因此我在 .on 函数中添加了该方法。
总的菜鸟问题,但不应该这样工作吗?
最初显示工具提示也需要几秒钟。
类似问题的回答对我没有帮助
$(document).on('mouseover', '.tooltip', function(){
$(this).tooltipster({
animation: 'grow',
delay: 50,
theme: 'tooltipster-default',
touchDevices: false,
trigger: 'hover',
iconDesktop: false,
multiple:true
});
});
$(document).on('click', '.add', function(){
$('html').append('<input type="button" class="tooltip" title="future element tooltip" value="FUTURE TOOLTIP EXAMPLE">')
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.bundle.min.js" integrity="sha512-ZKNW/Nk1v5trnyKMNuZ6kjL5aCM0kUATbpnWJLPSHFk/5FxnvF9XmpmjGbag6BEgmXiz7rL6o6uJF6InthyTSg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.css" integrity="sha512-3zyscitq6+9V1nGiptsXHLVaJaAMCUQeDW34fygk9LdcM+yjYIG19gViDKuDGCbRGXmI/wiY9XjdIHdU55G97g==" crossorigin="anonymous" />
</head>
<input type="button" class="tooltip" title="tooltip 1" value="TOOLTIP 1 EXAMPLE">
<input type="button" class="tooltip" title="tooltip 2" value="TOOLTIP 2 EXAMPLE">
<input type="button" class="add tooltip" title="add elements" value="ADD ELEMENTS">
</html>
不要将函数放在悬停事件中
您必须在正文中创建新按钮,并且每次添加新按钮时都重新初始化工具提示:所以我创建了一个 div 来接受新按钮
function tooltip_init() {
$(".tooltip").tooltipster({
contentCloning: true,
animation: 'grow',
delay: 50,
theme: 'tooltipster-default',
touchDevices: false,
trigger: 'hover',
iconDesktop: false,
multiple: true
});
}
tooltip_init();
$(document).on('click', '.add', function() {
$('#new').append('<input type="button" class="tooltip" title="future element tooltip" value="FUTURE TOOLTIP EXAMPLE">');
tooltip_init();
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.bundle.min.js" integrity="sha512-ZKNW/Nk1v5trnyKMNuZ6kjL5aCM0kUATbpnWJLPSHFk/5FxnvF9XmpmjGbag6BEgmXiz7rL6o6uJF6InthyTSg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.css" integrity="sha512-3zyscitq6+9V1nGiptsXHLVaJaAMCUQeDW34fygk9LdcM+yjYIG19gViDKuDGCbRGXmI/wiY9XjdIHdU55G97g==" crossorigin="anonymous" />
</head>
<input type="button" class="tooltip" title="tooltip 1" value="TOOLTIP 1 EXAMPLE">
<input type="button" class="tooltip" title="tooltip 2" value="TOOLTIP 2 EXAMPLE">
<input type="button" class="add tooltip" title="add elements" value="ADD ELEMENTS">
<div id="new"></div>
</html>
我正在使用 tooltipster 在我的页面中添加一些样式化的工具提示,但我也希望它们也显示在动态生成的元素上,因此我在 .on 函数中添加了该方法。 总的菜鸟问题,但不应该这样工作吗? 最初显示工具提示也需要几秒钟。 类似问题的回答对我没有帮助
$(document).on('mouseover', '.tooltip', function(){
$(this).tooltipster({
animation: 'grow',
delay: 50,
theme: 'tooltipster-default',
touchDevices: false,
trigger: 'hover',
iconDesktop: false,
multiple:true
});
});
$(document).on('click', '.add', function(){
$('html').append('<input type="button" class="tooltip" title="future element tooltip" value="FUTURE TOOLTIP EXAMPLE">')
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.bundle.min.js" integrity="sha512-ZKNW/Nk1v5trnyKMNuZ6kjL5aCM0kUATbpnWJLPSHFk/5FxnvF9XmpmjGbag6BEgmXiz7rL6o6uJF6InthyTSg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.css" integrity="sha512-3zyscitq6+9V1nGiptsXHLVaJaAMCUQeDW34fygk9LdcM+yjYIG19gViDKuDGCbRGXmI/wiY9XjdIHdU55G97g==" crossorigin="anonymous" />
</head>
<input type="button" class="tooltip" title="tooltip 1" value="TOOLTIP 1 EXAMPLE">
<input type="button" class="tooltip" title="tooltip 2" value="TOOLTIP 2 EXAMPLE">
<input type="button" class="add tooltip" title="add elements" value="ADD ELEMENTS">
</html>
不要将函数放在悬停事件中
您必须在正文中创建新按钮,并且每次添加新按钮时都重新初始化工具提示:所以我创建了一个 div 来接受新按钮
function tooltip_init() {
$(".tooltip").tooltipster({
contentCloning: true,
animation: 'grow',
delay: 50,
theme: 'tooltipster-default',
touchDevices: false,
trigger: 'hover',
iconDesktop: false,
multiple: true
});
}
tooltip_init();
$(document).on('click', '.add', function() {
$('#new').append('<input type="button" class="tooltip" title="future element tooltip" value="FUTURE TOOLTIP EXAMPLE">');
tooltip_init();
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.bundle.min.js" integrity="sha512-ZKNW/Nk1v5trnyKMNuZ6kjL5aCM0kUATbpnWJLPSHFk/5FxnvF9XmpmjGbag6BEgmXiz7rL6o6uJF6InthyTSg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.css" integrity="sha512-3zyscitq6+9V1nGiptsXHLVaJaAMCUQeDW34fygk9LdcM+yjYIG19gViDKuDGCbRGXmI/wiY9XjdIHdU55G97g==" crossorigin="anonymous" />
</head>
<input type="button" class="tooltip" title="tooltip 1" value="TOOLTIP 1 EXAMPLE">
<input type="button" class="tooltip" title="tooltip 2" value="TOOLTIP 2 EXAMPLE">
<input type="button" class="add tooltip" title="add elements" value="ADD ELEMENTS">
<div id="new"></div>
</html>