diff --git a/src/components/chat/ProviderSettings.vue b/src/components/chat/ProviderSettings.vue
index 0e4c1dd2a..07044ca4e 100644
--- a/src/components/chat/ProviderSettings.vue
+++ b/src/components/chat/ProviderSettings.vue
@@ -19,6 +19,7 @@ import { useAIChat } from '@/composables/use-chat'
 import { openExternalLink } from '@/utils/external-link'
 
 const cls = usePopoverUI({ content: 'isolate z-[51] w-64 p-3' })
+const popoverOpen = ref(false)
 
 const {
   providerID,
@@ -95,8 +96,8 @@ function clearUnsplashKey() {
 </script>
 
 <template>
-  <PopoverRoot>
-    <Tip label="Provider settings">
+  <PopoverRoot @update:open="popoverOpen = $event">
+    <Tip label="Provider settings" :disabled="popoverOpen">
       <PopoverTrigger
         data-test-id="provider-settings-trigger"
         class="rounded p-0.5 text-muted hover:bg-hover hover:text-surface"
diff --git a/src/components/properties/ColorStyleRow.vue b/src/components/properties/ColorStyleRow.vue
index 413c982a4..e241a3ea5 100644
--- a/src/components/properties/ColorStyleRow.vue
+++ b/src/components/properties/ColorStyleRow.vue
@@ -15,6 +15,7 @@ import ScrubInput from '@/components/ScrubInput.vue'
 import Tip from '@/components/ui/Tip.vue'
 import { useIconButtonUI } from '@/components/ui/icon-button'
 
+import { ref } from 'vue'
 import { colorToCSS } from '@open-pencil/core'
 import { useI18n } from '@open-pencil/vue'
 
@@ -48,6 +49,7 @@ const emit = defineEmits<{
 }>()
 
 const { panels, dialogs } = useI18n()
+const varPopoverOpen = ref(false)
 </script>
 
 <template>
@@ -71,8 +73,9 @@ const { panels, dialogs } = useI18n()
         bindingApi.colorVariables.value.length > 0 &&
         !bindingApi.getBoundVariable(activeNodeId, index)
       "
+      @update:open="varPopoverOpen = $event"
     >
-      <Tip :label="panels.applyVariable">
+      <Tip :label="panels.applyVariable" :disabled="varPopoverOpen">
         <PopoverTrigger
           class="shrink-0 cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
         >
diff --git a/src/components/ui/Tip.vue b/src/components/ui/Tip.vue
index 33db56585..b2e1796e2 100644
--- a/src/components/ui/Tip.vue
+++ b/src/components/ui/Tip.vue
@@ -5,14 +5,15 @@ import { useTooltipUI } from '@/components/ui/tooltip'
 
 const cls = useTooltipUI({ content: 'animate-in zoom-in-95 fade-in' })
 
-const { side = 'top' } = defineProps<{
+const { side = 'top', disabled = false } = defineProps<{
   label: string
   side?: 'top' | 'bottom' | 'left' | 'right'
+  disabled?: boolean
 }>()
 </script>
 
 <template>
-  <TooltipRoot>
+  <TooltipRoot :open="disabled ? false : undefined">
     <TooltipTrigger as-child>
       <slot />
     </TooltipTrigger>