Reactive open state

[timmaier]

The v-slot tippy instance in the default slot is not reactive is there another way to get the current open state reactivley?

My use case is I want to have the default content highlighted a certain colour if the tippy is showing

I tried this but then ran into the issue that the isShown is not reactive

<template #default="{ tippy }">
      <div :class="tippy?.state.isShown ? 'bg-gray-300' : 'bg-gray-50'"  class="text-gray-400 select-none cursor-pointer p-2  rounded-md hover:bg-gray-50">
          Trigger tippy
      </div>
</template>
<template #content>
      <div class="px-2 h-auto py-2 text-white rounded bg-white shadow-xl border">
         Tippy content
      </div>
</template>

[KABBOUCHI]

I've added a reactive state in v6.0.0-alpha.40

const { state } = useTippy(....)

<template #default="{ state }">
    <div :class="state.isShown ? 'bg-gray-300' : 'bg-gray-50'">
        Trigger tippy
    </div>
</template>

[tonychuuy]

State is not working in the default slot in v6.0.0-alpha.51.

https://codesandbox.io/s/vue-tippy-state-not-reactive-yvesi9?file=/src/App.vue

It works in the content slot.

[KABBOUCHI]

State is not working in the default slot in v6.0.0-alpha.51.

codesandbox.io/s/vue-tippy-state-not-reactive-yvesi9?file=/src/App.vue

It works in the content slot.

plz can u try v6.0.0-alpha.52?

[tonychuuy]

plz can u try v6.0.0-alpha.52?

Yes, it is working but now I need to check the attrs using value first state.value.isVisible since it is returning a ref

[KABBOUCHI]

@tonychuuy sry for the delay, fixed in v6.0.0-alpha.53, plz can u retry?