Tippy.js是否不显示data属性的内容？

Question

I've installed tippy.js to handle my tooltips, however I am struggling to get the tooltips to display the content set from the data attribute. My default tooltip is working fine, however when I initialise by a class, to be able to add a different style to the tooltip, it doesn't get the content from the tooltip.

tippy.setDefaults({
    animation: 'scale',
    animateFill: false,
    maxWidth: 240,
    duration: 0,
    arrow: false,
})

tippy('.js-tippy-reviews', {
    theme: 'reviews',
    animation: 'scale',
    animateFill: false,
    maxWidth: 240,
    duration: 0,
    arrow: false,
})

If I add the content method to tippy it will display, however since the content of the tooltip is dynamic, i need to set it on the data attribute. I am unsure how to pass the data attribute from the element into tippy.

content: this.dataset.tippy

Any ideas what I'm doing wrong?

HTML:

<div class="js-tippy-reviews reviews-notification" data-tippy="2 Pending Reviews"></div>

Answer 1

You could add the onShow() function and read it from the instance and set the content from the reference dataset.

 tippy.setDefaults({ animation: 'scale', animateFill: false, maxWidth: 240, duration: 0, arrow: false, }); tippy('.js-tippy-reviews', { theme: 'reviews', animation: 'scale', animateFill: false, maxWidth: 240, duration: 0, arrow: false, onShow(instance) { instance.popper.hidden = instance.reference.dataset.tippy ? false : true; instance.setContent(instance.reference.dataset.tippy); } }); $(document).ready(function(){ $("#btn-change-data").click(function() { $(".js-tippy-reviews").attr("data-tippy",$("#test-input").val()); }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/popper.js@1"></script> <script src="https://unpkg.com/tippy.js@4"></script> <div class="js-tippy-reviews reviews-notification" data-tippy="test">CONTENT</div> <input type="text" id="test-input" /> <button id="btn-change-data">Change data-tippy</button>