0

我正在使用 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 元素的数据属性。我怎么能这样做？

4

1 回答 1

1

联系了图书馆的维护者任何寻找这个的人都可以使用。

this._reference
于 2018-01-25T03:24:56.040 回答