Grouped tooltips failing to reposition after trigger/show

[joonaspaakko]

This is related to #270

I have a new problem related to singleton. It works fine in normal use, but I'm loading more data when each individual tippy in the singleton is shown as an effort to reduce the load time of the carousel that houses the tooltips, and with the tippy positioned at the top the additional content increases the height displacing the tooltip. I did a hacky repositioning function with tippy.hide() → tippy.show(), but sometimes when moving to the next element it would on mouseenter show but then immediately hide the tooltip.

So I figured it'd be better if I just looked for an actual reposition method, which it turns out Popper has, but it seems like the popperInstance provided by trigger is null at the very beginning of the callback and even when it exists on subsequent triggers, the method popperInstance.update() doesn't always work. I think in those cases the popper instance is from the previous tooltip or something. I was hoping you'd have an idea how I can get around this. It kinda feels like I need show or shown callback that triggers on each individual tippy in a singleton.

https://codesandbox.io/s/tippygroup-example-vue-3-forked-67j9o6?file=/src/App.vue:1969-2151

1. Open the first tippy

   • Repositioning fails but it's fine here because tippy handles it automatically

2. Wait for extra data to load in after 2 seconds

   • Repositioning success, but this is still problematic because I'm not doing lengthy http requests or waiting for 2 seconds, I'm actually just processing potentially big arrays and it might take a second or two... or not, which is I guess why my hide/show trick was failing.

3. Move to the second tippy

   • REPOSITIONING FAILS

4. Move to the third tippy

   • Repositioning is successful?

[joonaspaakko]

Turns out it was a pretty simple to fix by wrapping the update() function in a $nextTick as well.

https://codesandbox.io/s/tippygroup-example-vue-3-forked-677ehc?file=/src/App.vue:2038-2279

<tippy-singleton 
  move-transition="transform 0.2s ease-out" 
  placement="top" 
  :delay="520" 
  @trigger="onTrigger"
>...</tippy-singleton>

methods: {

  onTrigger( tippy, e ) {

    // First reposition
    repositionTooltip( tippy );

    // Second reposition after data is brought in...
    repositionTooltip( tippy );

  },
  repositionTooltip( tippy ) {

    this.$nextTick(() => {
      try { tippy.popperInstance.update(); } catch (e) {}
    });

  }
}

Not sure if try catch was needed anymore after adding a $nextTick()... I might hazard a guess it's not, but I didn't feel like spending anymore time on it.