Search code examples
javascripthtmljqueryjquery-uitooltipster

tooltipster plug in for future elements?

i'm using tooltipster for adding some styled tooltips in my page,but i also want them to show on dynamic generated elements too,therefore i'm adding the method inside a .on function. total noob question,but should'nt be working like this ? also it takes some seconds to show tooltip initially. answers in similar questions didnt help me

$(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>

Solution

    1. dont put the function inside hover event

    2. You have to create your new button inside body and you reinit tooltipster each time you add a new button: so i have create a div to accept new button

    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>