Enabled flag

docs/content/en/flavor/directive.md

@@ -26,3 +26,15 @@ Click [here](/props) to see full documentation on props.
   Tippy!
 </button>
 ```
+
+For dynamically setting if tooltip is enabled:
+
+```js
+const isTippyEnabled = ref(true);
+```
+
+```html
+<button v-tippy="{ content: 'Hello!', enabled: isTippyEnabled }">
+  Tippy!
+</button>
+```

docs/content/en/props.md

@@ -195,7 +195,7 @@ useTippy(target, {
   delay: [100, 200],
   // show delay is 100ms, hide delay is the default
   delay: [100, null],
-}
+})
 ```
 
 ## duration
@@ -212,7 +212,19 @@ useTippy(target, {
   duration: [100, 200],
   // show duration is 100ms, hide duration is the default
   duration: [100, null],
-}
+})
+```
+
+## enabled
+
+Controls if tooltip is enabled.
+
+```js
+useTippy(target, {
+  // default
+  enabled: true,
+  enabled: false
+})
 ```
 
 ## followCursor

src/components/Tippy.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
     tag: string
     contentTag: string
     contentClass: string
+    enabled: boolean
   }
   interface ComponentCustomProperties extends UnwrapNestedRefs<ReturnType<typeof useTippy>> { }
 }
@@ -84,9 +85,10 @@ const TippyComponent = defineComponent({
     maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
     role: { default: () => tippy.defaultProps['role'] },
     theme: { default: () => tippy.defaultProps['theme'] },
-    zIndex: { default: () => tippy.defaultProps['zIndex'] }
+    zIndex: { default: () => tippy.defaultProps['zIndex'] },
+    enabled: { type: Boolean, default: true },
   },
-  emits: ['state'],
+  emits: ['state', 'update:enabled'],
   setup(props, { slots, emit, expose }) {
     const elem = ref<Element>()
     const findParentHelper = ref<HTMLElement>()
@@ -138,8 +140,22 @@ const TippyComponent = defineComponent({
       })
     })
 
-    watch(tippy.state, () => {
+    watch(() => props.enabled, (newValue) => {
+      const isTippyEnabled = tippy.state.value.isEnabled;
+
+      if (newValue && !isTippyEnabled) {
+        tippy.enable();
+      } else if (!newValue && isTippyEnabled) {
+        tippy.disable();
+      }
+    });
+
+    watch(tippy.state, (newValue, oldValue) => {
       emit('state', unref(tippy.state))
+
+      if (newValue.isEnabled !== oldValue?.isEnabled && props.enabled !== newValue.isEnabled)
+        emit('update:enabled', newValue.isEnabled)
+
     }, { immediate: true, deep: true })
 
     watch(() => props, () => {

src/composables/useTippy.ts

@@ -17,6 +17,14 @@ import {
 } from 'vue'
 import { TippyOptions, TippyContent } from '../types'
 
+interface TippyState {
+  isEnabled: boolean
+  isVisible: boolean
+  isDestroyed: boolean
+  isMounted: boolean
+  isShown: boolean
+}
+
 tippy.setDefaultProps({
   //@ts-ignore
   onShow: instance => {
@@ -37,12 +45,26 @@ export function useTippy(
     mount: boolean,
     appName: string,
   } = { mount: true, appName: 'Tippy' }
-) {
+) : {
+    tippy: Ref<Instance | undefined>
+    refresh: () => void
+    refreshContent: () => void
+    setContent: (value: TippyContent) => void
+    setProps: (value: TippyOptions) => void
+    destroy: () => void
+    hide: () => void
+    show: () => void
+    disable: () => void
+    enable: () => void
+    unmount: () => void
+    mount: () => void
+    state: Ref<TippyState>
+} {
   settings = Object.assign({ mount: true, appName: 'Tippy' }, settings);
 
   const vm = getCurrentInstance()
   const instance = ref<Instance>()
-  const state = ref({
+  const state = ref<TippyState>({
     isEnabled: false,
     isVisible: false,
     isDestroyed: false,

src/directive/index.ts

@@ -8,6 +8,7 @@ const directive: Directive = {
     const modifiers = Object.keys(binding.modifiers || {})
     const placement = modifiers.find(modifier => modifier !== 'arrow')
     const withArrow = modifiers.findIndex(modifier => modifier === 'arrow') !== -1
+    const enabled = opts.enabled ?? true;
 
     if (placement) {
       opts.placement = opts.placement || placement
@@ -56,7 +57,11 @@ const directive: Directive = {
       opts.content = el.getAttribute('content')
     }
 
-    useTippy(el, opts)
+    const { disable } = useTippy(el, opts)
+
+    if (!enabled) {
+      disable();
+    }
   },
   unmounted(el) {
     if (el.$tippy) {
@@ -68,6 +73,7 @@ const directive: Directive = {
 
   updated(el, binding) {
     const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {}
+    const enabled = opts.enabled ?? true;
 
     if (el.getAttribute('title') && !opts.content) {
       opts.content = el.getAttribute('title')
@@ -83,6 +89,14 @@ const directive: Directive = {
     } else if (el._tippy) {
       el._tippy.setProps(opts || {})
     }
+
+    const isTippyEnabled = el.$tippy?.state.value.isEnabled;
+
+    if (enabled && !isTippyEnabled) {
+      el.$tippy.enable();
+    } else if (!enabled && isTippyEnabled) {
+      el.$tippy.disable();
+    }
   },
 }