feat: add disableClosingTrigger props to prevent closing tooltip on c…

…lick

docs/content/components/tooltip.md

@@ -91,6 +91,11 @@ Wraps your app to provide global functionality to your tooltips.
   name: 'disableHoverableContent',
   type: 'boolean',
   description: '<span> Prevents <Code>TooltipContent</Code> from remaining open when hovering. Disabling this has accessibility consequences. </span>'
+  },
+  {
+  name: 'disableClosingTrigger',
+  type: 'boolean',
+  description: '<span> Prevents <Code>TooltipTrigger</Code> from closing content when clicked. Disabling this has accessibility consequences. </span>'
   }
 ]" />
 
@@ -120,6 +125,12 @@ Contains all the parts of a tooltip.
   type: 'boolean',
   default: false,
   description: '<span> Prevents <Code>TooltipContent</Code> from remaining open when hovering. Disabling this has accessibility consequences. Inherits from <Code>TooltipProvider</Code>. </span>'
+  },
+  {
+  name: 'disableClosingTrigger',
+  type: 'boolean',
+  default: false,
+  description: '<span> Prevents <Code>TooltipTrigger</Code> from closing content when clicked. Disabling this has accessibility consequences. Inherits from <Code>TooltipProvider</Code>. </span>'
   }
 ]" />
 

packages/radix-vue/src/Tooltip/TooltipContentImpl.vue

@@ -99,7 +99,12 @@ onMounted(() => {
     as-child
     :disable-outside-pointer-events="false"
     @escape-key-down="emits('escapeKeyDown', $event)"
-    @pointer-down-outside="emits('pointerDownOutside', $event)"
+    @pointer-down-outside="(event) => {
+      if (context.disableClosingTrigger.value && context.trigger.value?.contains(event.target as HTMLElement))
+        event.preventDefault()
+
+      emits('pointerDownOutside', event)
+    }"
     @focus-outside.prevent
     @dismiss="context.onClose()"
   >

packages/radix-vue/src/Tooltip/TooltipProvider.vue

@@ -9,6 +9,7 @@ interface TooltipProviderContextValue {
   onPointerInTransitChange(inTransit: boolean): void
   isPointerInTransitRef: Ref<boolean>
   disableHoverableContent: Ref<boolean>
+  disableClosingTrigger: Ref<boolean>
 }
 
 export const [injectTooltipProviderContext, provideTooltipProviderContext]
@@ -30,6 +31,11 @@ export interface TooltipProviderProps {
    * @defaultValue false
    */
   disableHoverableContent?: boolean
+  /**
+   * When `true`, clicking on trigger will not close the content.
+   * @defaultValue false
+   */
+  disableClosingTrigger?: boolean
 }
 </script>
 
@@ -42,7 +48,7 @@ const props = withDefaults(defineProps<TooltipProviderProps>(), {
   skipDelayDuration: 300,
   disableHoverableContent: false,
 })
-const { delayDuration, skipDelayDuration, disableHoverableContent } = toRefs(props)
+const { delayDuration, skipDelayDuration, disableHoverableContent, disableClosingTrigger } = toRefs(props)
 
 const isOpenDelayed = ref(true)
 const isPointerInTransitRef = ref(false)
@@ -66,6 +72,7 @@ provideTooltipProviderContext({
     isPointerInTransitRef.value = inTransit
   },
   disableHoverableContent,
+  disableClosingTrigger,
 })
 </script>
 

packages/radix-vue/src/Tooltip/TooltipRoot.vue

@@ -25,6 +25,11 @@ export interface TooltipRootProps {
    * from Tooltip.Provider.
    */
   disableHoverableContent?: boolean
+  /**
+   * When `true`, clicking on trigger will not close the content.
+   * @defaultValue false
+   */
+  disableClosingTrigger?: boolean
 }
 
 export type TooltipRootEmits = {
@@ -42,6 +47,7 @@ export interface TooltipContextValue {
   onOpen(): void
   onClose(): void
   disableHoverableContent: Ref<boolean>
+  disableClosingTrigger: Ref<boolean>
 }
 
 export const [injectTooltipRootContent, provideTooltipRootContext]
@@ -60,13 +66,15 @@ const props = withDefaults(defineProps<TooltipRootProps>(), {
   open: undefined,
   delayDuration: undefined,
   disableHoverableContent: undefined,
+  disableClosingTrigger: undefined,
 })
 
 const emit = defineEmits<TooltipRootEmits>()
 
 const providerContext = injectTooltipProviderContext()
 
 const disableHoverableContent = computed(() => props.disableHoverableContent ?? providerContext.disableHoverableContent.value)
+const disableClosingTrigger = computed(() => props.disableClosingTrigger ?? providerContext.disableClosingTrigger.value)
 const delayDuration = computed(() => props.delayDuration ?? providerContext.delayDuration.value)
 
 const open = useVModel(props, 'open', emit, {
@@ -138,7 +146,7 @@ provideTooltipRootContext({
   onOpen: handleOpen,
   onClose: handleClose,
   disableHoverableContent,
-
+  disableClosingTrigger,
 })
 </script>
 

packages/radix-vue/src/Tooltip/TooltipTrigger.vue

@@ -72,7 +72,9 @@ onMounted(() => {
         if (!isPointerDown) context.onOpen()
       }"
       @blur="context.onClose()"
-      @click="context.onClose()"
+      @click="() => {
+        if (!context.disableClosingTrigger.value) context.onClose()
+      }"
     >
       <slot />
     </Primitive>

packages/radix-vue/src/Tooltip/stories/Tooltip.content.story.vue

@@ -10,7 +10,7 @@ const lastEvent = ref('')
   <Story title="Tooltip/Content" :layout="{ type: 'grid', width: '300px' }">
     <Variant title="Aria Label">
       <div class="grid w-full h-28 place-content-center">
-        <TooltipProvider>
+        <TooltipProvider :disable-closing-trigger="true">
           <TooltipRoot :delay-duration="1000" :default-open="true">
             <TooltipTrigger
               class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
@@ -56,6 +56,7 @@ const lastEvent = ref('')
           <TooltipRoot>
             <TooltipTrigger
               class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+              @click.prevent
             >
               <Icon icon="radix-icons:plus" />
             </TooltipTrigger>