使用Tippy.js创建多动态Tooltip时如何获取元素data属性

我一眼就看出问题所在了——你在onShow回调里用$(this)想拿触发元素的data-orderid，但这里的this指向的是Tippy生成的popper提示框元素，不是你点击的那个.order-tooltip span！这就是为什么你拿不到正确的orderid。

解决方法：利用Tippy实例的reference属性 #

Tippy的所有回调函数都会接收一个实例参数，这个实例里的reference属性就是触发tooltip的原始DOM元素（也就是你的span标签）。我们可以通过它来获取对应的data-orderid。

修改你的代码如下：

const template = document.querySelector('#tooltipTemplate')
const initialText = template.textContent
const tips = tippy('.order-tooltip', {
  animation: 'shift-toward',
  arrow: true,
  html: '#tooltipTemplate',
  onShow(instance) { // 接收instance参数
    const content = this.querySelector('.tippy-content')
    // 这里用instance.reference拿到触发的span元素
    const triggerElement = instance.reference;
    // 检查当前tooltip是否已经加载过，或者正在加载
    if (triggerElement._loading || content.innerHTML !== initialText) return
    triggerElement._loading = true // 把loading状态绑定到触发元素，避免多个tooltip互相干扰
    
    // 获取data-orderid，可以用原生JS或者jQuery
    // 原生方式（推荐，不用依赖jQuery）：
    const orderid = triggerElement.dataset.orderid;
    // 或者jQuery方式：
    // const orderid = $(triggerElement).data('orderid');
    
    const url = "/fetch_position_tooltip?" + $.param({orderid: orderid})
    fetch(url).then(resp => resp.json()).then(responseJSON =>{
      content.innerHTML = responseJSON
      triggerElement._loading = false
    }).catch(e => {
      console.log(e)
      content.innerHTML = 'Loading failed'
      triggerElement._loading = false
    })
  },
  onHidden(instance) {
    const content = this.querySelector('.tippy-content')
    content.innerHTML = initialText
    // 重置loading状态
    instance.reference._loading = false
  },
  popperOptions: {
    modifiers: {
      preventOverflow: { enabled: false },
      hide: { enabled: false }
    }
  }
})

关键改动说明： #

• 在onShow回调中添加instance参数，通过instance.reference获取触发tooltip的span元素。
• 把全局的tip.loading改成绑定到触发元素的_loading属性，避免多个tooltip共享同一个加载状态导致的冲突。
• 用原生的dataset.orderid获取属性，减少对jQuery的依赖（当然你也可以继续用jQuery方式，效果一致）。

这样修改后，每个tooltip触发时都会拿到自己对应的data-orderid，就能正确请求对应内容了。

内容的提问来源于stack exchange，提问作者stackedup