Theme works in directive mode - not as component.

[Aj-An]

Version:

v6.0.0-alpha.46.

Issue:

The issue I'm facing exists when I'm using tippy as component. In directive mode I get the expected results. My project is setup with Options API.

I'm trying to update dynamically the value of the theme from light to dark by using the following approach:

<tippy interactive :theme="mode">
  <action-link>Show Details</action-link>

  <template #content>
    <options-menu/>
  </template>
</tippy>

where mode is a reactive property in my options API of the component:

data() {
  return {
    mode: 'light'
  }
}

On page load I can see the tippy component fine but when I change the mode value and hover over the link again, no popup appears. I tried adding the watch-props prop as well as mentioned in issue #65 but it didn't make any difference.

If I follow the directive approach and use <action-link v-tippy="{ interactive: true, theme: mode }">Show Details</action-link> instead, everything works as expected.

The problem is that my content is a component with a bunch of logic in it and this is why I want to stick with the component version.

Thank you for the great package.

[KABBOUCHI]

@Aj-An I'm not able to replicate the issue, plz can u share an example https://vite.new/vue?

working example: https://github.com/KABBOUCHI/vue-tippy/blob/next/playground/pages/Theme.vue

[Aj-An]

@KABBOUCHI thank you for the prompt response and here's an example of what I'm talking about.

In the working example you have provided, you pass a string as a value for the content prop i.e. content="Hello!" but what doesn't seem to work is when you start using the scoped slots for your content i.e.

<tippy
  :theme="theme"
  interactive
>
  <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
    Theme {{ theme }}
  </button>

  <template #content>
    Test
  </template>
</tippy>

[KABBOUCHI]

@Aj-An its not a theme issue, changing props is overriding content value

fixed in v6.0.0-alpha.55, plz can u try it?

[Aj-An]

@KABBOUCHI you are a legend! It works perfectly fine now! Thank you again for the AMAZING package!