使用tippyjs实例化多个工具提示时访问数据属性

Question

我正在使用页面上的tippyjs库创建多个动态工具提示，该库使用fetch 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>

在实例化tooli技巧时，我需要访问每个span元素的数据属性。我怎么能这么做？

Answer 1

联系了库的维护人员，任何想要找到这个的人都可以使用。

this._reference