How to bind tooltips to this html elements

Question

I have this html element when console.log them in my code.

<span id="stamps[12]" class="stamps value  widget-data  tooltipstered" data-value="0.00" data-toggle="tooltip">0.00</span>

This is how I do call tooltipster.But its not working.

$($(htmlData)).find('[data-toggle="tooltip"]').each(function(v){
                console.log(this);
                 $(this).tooltipster();
             });

Answer 1

If you want the content of the tooltipster to be taken from data-* attribute, you need to set it inside the tooltipster constructor (use the content attribute).

Here is an example:

$('[data-toggle="tooltip"]').each(function(v){
  console.log(this);
  $(this).tooltipster({
    content: $(this).data('value')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<span id="stamps[12]" class="stamps value  widget-data  tooltipstered" data-value="0.00" data-toggle="tooltip">0.00</span>
<br />
<span id="stamps[13]" class="stamps value  widget-data  tooltipstered" data-value="12.23" data-toggle="tooltip">12.23</span>