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

Question

我正在使用 fetch api 获取内容的页面上使用 tippyjs 库创建多个动态工具提示。如何在工具提示初始化时访问每个选择器的数据属性。

这是我的

代码

<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

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

Access the data attribute while instantiating multiple tool-tips using tippyjs

javascript

jquery

tippyjs