Need enabled prop for dynamically enable/disable tippy

[lukas-pierce]

Heed simple enabled boolean prop:

<template>
  <!--Switcher-->
  <label><input type="checkbox" v-model="tippyEnabled"> Enable tippy</label>

  <!--button with optional tippy-->
  <button v-tippy="{content: 'Some content', enabled: tippyEnabled}">Hover me</button>
</template>

<script setup>
const tippyEnabled = ref(false)
</script>

---

Now for this approach I need use composition API with useTippy(), It looks bulky:

<template>
  <!--Switcher-->
  <label><input type="checkbox" v-model="tippyEnabled"> Enable tippy</label>

  <!--button with optional tippy-->
  <button ref="button">Hover me</button>
</template>

<script setup>
import { useTippy } from 'vue-tippy'

const tippyEnabled = ref(false)
const button = ref(null)

// need wrap this hook for nuxt usage
onMounted(() => {
  if (button.value) {

    // create Tippy instance
    const { enable, disable } = useTippy(button.value, {
      content: 'Some content',
    })

    watchEffect(() => {
      tippyEnabled.value ? enable() : disable()
    })
  }
})
</script>

[KABBOUCHI]

u can use onShow to disable the tooltip

  <button v-tippy="{ content: 'Some content', onShow: () => true }">
    Hover me
  </button>

https://codesandbox.io/p/sandbox/practical-noyce-nug0jl

[a-ruban]

@KABBOUCHI also vote for "enabled" prop, it's just more explicit and obvious

[JackHamer09]

+1

[yulafezmesi]

+1 for enabled prop.

[daniilgri]

+1

[FredrikAnkarang]

+1