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>
Use the current element to select its template:
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 thecontent
: