0

i am creating a multiple dynamic tooltips using tippyjs library on a page that fetches content using fetch api. how do i access the data attribute on each of the selector while the initialisation of the tooltip.

here is what i have

Code 

<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>

i need to access the data attribute for each of the span element when instantiating the toolitip . How could i do this?

stackedup
  • 63
  • 4

1 Answers1

1

Contacted the maintainer of the library Any one looking for this can use.

this._reference
stackedup
  • 63
  • 4