javascript - Tippy.js not displaying content from the data attribute? - Stack Overflow

admin管理员组

文章数量:1290935

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>

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>

• javascript
• tooltip
• tippyjs

Share Improve this question Follow edited Jun 21, 2019 at 15:51 marc_s 755k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Apr 16, 2019 at 16:05 lkylky 1,12933 gold badges1818 silver badges3838 bronze badges 2

• Could you provide the DOM element? – Recep Karadas Commented Apr 16, 2019 at 16:18
• I've added the html to the question :) – lky Commented Apr 16, 2019 at 16:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg./popper.js@1"></script>
<script src="https://unpkg./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>

This solution works

tippy('.js-tippy-reviews', {
    content: (reference) => reference.dataset.tippy,
})

本文标签： javascriptTippyjs not displaying content from the data attributeStack Overflow