Доступ к атрибуту данных при создании нескольких подсказок с помощью tippyjs

Question

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

вот что у меня есть

Код

<span class="order-tooltip" data-orderid="123456">Order ID 123456</span>
<span class="order-tooltip" data-orderid="454515">Order ID 454515</span>
<span class="order-tooltip" data-orderid="487848">Order ID 487848</span>
<span class="order-tooltip" data-orderid="154214">Order ID 154214</span>

<div id="tooltipTemplate" style="display: none;">
Loading data...

</div>
<script>

const template = document.querySelector('#tooltipTemplate')
const initialText = template.textContent


const tip = tippy('.order-tooltip', {
  animation: 'shift-toward',
  arrow: true,
  html: '#tooltipTemplate',
  onShow() {
    // `this` inside callbacks refers to the popper element
    const content = this.querySelector('.tippy-content')

    if (tip.loading || content.innerHTML !== initialText) return

    tip.loading = true
    console.log($('.order-tooltip').data('orderid')) // This is not working 
    var orderid = $(this).data('orderid');
    var url = "/fetch_position_tooltip?" + $.param({orderid: orderid})

    fetch(url).then(resp => resp.json()).then (responseJSON =>{

      content.innerHTML = responseJSON
      tip.loading = false
    }).catch(e => {
        console.log(e)
      content.innerHTML = 'Loading failed'
      tip.loading = false
    })
  },
  onHidden() {
    const content = this.querySelector('.tippy-content')
    content.innerHTML = initialText
  },
  // prevent tooltip from displaying over button
  popperOptions: {
    modifiers: {
      preventOverflow: {
        enabled: false
      },
      hide: {
        enabled: false
      }
    }
  }
})
</script>

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

Answer 1

Связаться с сопровождающим библиотеки. Любой, кто ищет это, может использовать.

this._reference