I am trying to get multiple tooltips on the same page with different HTML content using tippy.js . This content varies - it might me just image or text formatted with HTML tags or text + image(s). How can I make this work?
I tried to run this code but didn't had much success
<a class="btn" href="#">Text</a>
<div class="myTemplate">
<b>Text</b> <img src="https://i.imgur.com/dLcYjue.png">
</div>
<a class="btn" href="#">Text2</a>
<div class="myTemplate">
<b>Text2</b>
</div>
<script type="text/javascript">
tippy('.btn', {
content: document.querySelector('.myTemplate')
})
const clone = document.querySelector('.myTemplate').cloneNode(true)
</script>
maybe this helps someone getting here again:
also check the documentation: https://atomiks.github.io/tippyjs/v6/html-content/
document.querySelectorAll('button[data-template]').forEach(btn => { tippy(btn, { content(reference) { const id = reference.getAttribute('data-template'); const template = document.getElementById(id); return template.innerHTML; }, allowHTML: true }) })
<script src="https://unpkg.com/@popperjs/core@2.0.6/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6.0.0/dist/tippy-bundle.umd.min.js"></script> <button data-template="one">One</button> <button data-template="two">Two</button> <button data-template="three">Three</button> <div style="display: none;"> <div id="one"> <strong>Content for `one`</strong> </div> <div id="two"> <strong>Content for `two`</strong> </div> <div id="three"> <strong>Content for `three`</strong> </div> </div>
tippy takes selector as its primary argument, You would need different ids to do this. If there are more than a couple of content tooltips/generated at runtime, I would recommend to use a common convention in setting id
and using a for loop for iterating over it.
Considering, there are 2 content tooltips,
<a class="btn1" href="#">Text</a>
<div class="myTemplate1">
<b>Text</b> <img src="https://i.imgur.com/dLcYjue.png">
</div>
<a class="btn2" href="#">Text2</a>
<div class="myTemplate2">
<b>Text2</b>
</div>
<script type="text/javascript">
tippy('.btn1', {
content: document.querySelector('.myTemplate1')
})
tippy('.btn2', {
content: document.querySelector('.myTemplate2')
})
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.