Create dynamic tooltips with tippy.js

Question

I create multiple tooltip contents with tippy.js But i can't make dynamic content. It shows only first tooltip template.

Second problem is, when i put style: display:none to tooltip wrapper, tooltip doesn't shows. When i remove style: display:none , tooltips content showing as normal (it must be hidden).

How can i make tooltips with child template?

Also here is codepen example: https://codepen.io/wpuzman/pen/mQeeRQ

 $(document).ready(function() { $('.box').each(function(){ tippy(this, { arrow: true, arrowType: 'round', size: 'large', duration: 500, animation: 'scale', placement: 'left', interactive: true, theme: 'google', content: document.querySelector('.tooltip_templates').cloneNode(true) }); }); });

 .wrap { margin: 150px; position: relative; } .box { float: left; margin-right: 10px; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script> <div class="wrap"> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 1</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 2</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 3</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 4</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 5</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 6</h3> </div> </div> </div> </div>

Answer 1

Use the current element to select its template:

$(document).ready(function() {
  $('.box').each(function(){
      tippy(this, {
          arrow: true,
          arrowType: 'round',
          size: 'large',
          duration: 500,
          animation: 'scale',
          placement: 'left',
          interactive: true,
          theme: 'google',
          content: this.querySelector('.tooltip_templates')
      });
  });
});

this.querySelector('.tooltip_templates') will select the child with that class which will be used as the content.

You can also avoid the .each() loop by using a function for the content :

tippy('.box', {
    animateFill: false,
    arrow: true,
    arrowType: 'round',
    size: 'large',
    duration: 500,
    animation: 'scale',
    placement: 'left',
    interactive: true,
    theme: 'google',
    content: function (reference) {
        return reference.querySelector('.tooltip_templates');
    }
});