Tippy.js не отображает содержимое из атрибута данных? - PullRequest
Новая
       27

Tippy.js не отображает содержимое из атрибута данных?

0 голосов
/ 16 апреля 2019

Я установил tippy.js для обработки моих всплывающих подсказок, однако я изо всех сил пытаюсь получить всплывающие подсказки для отображения набора содержимого из атрибута данных.Моя всплывающая подсказка по умолчанию работает нормально, однако, когда я инициализирую классом, чтобы иметь возможность добавить другой стиль к подсказке, он не получает содержимое из подсказки.

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,
})

Если я добавлю метод содержимого в tippy, он будет отображаться, однако, поскольку содержимое всплывающей подсказки является динамическим, мне нужно установить его в атрибуте данных.Я не уверен, как передать атрибут данных из элемента в tippy. 

content: this.dataset.tippy

Есть идеи, что я делаю не так?

HTML: 

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

1 Ответ

1 голос
/ 16 апреля 2019

Вы можете добавить функцию onShow (), прочитать ее из экземпляра и установить содержимое из набора эталонных данных. 

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>
...