tooltipster 插件用于未来的元素?

Posted

技术标签:

【中文标题】tooltipster 插件用于未来的元素?【英文标题】:tooltipster plug in for future elements? 【发布时间】:2021-06-14 16:17:52 【问题描述】:

我正在使用 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>

【问题讨论】:

【参考方案1】:

    不要将函数放在悬停事件中

    您必须在正文中创建新按钮,并且每次添加新按钮时都要重新启动工具提示器:所以我创建了一个 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 插件用于未来的元素?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Tooltipster 工具提示中显示来自 jQuery Validate 插件的消息?

发现一款好用的jquery插件(tooltipster实用的工具提示插件)

Tooltipster jQuery插件和引导程序一起导致消失的问题

如何将 jQuery 用于未来的元素?

Tooltipster 箭头打开,内容位于左侧

如何在 Tooltipster 的内容中运行函数?