diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index 6ab8d41ef..10a764f79 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -4,26 +4,19 @@
       <ul class="items">
         <slot></slot>
       </ul>
-      <UIDropdown trigger="click">
+      <UIDropdownWithTooltip>
+        <template #dropdown-content>
+          <slot name="add-options"></slot>
+        </template>
+        <template #tooltip-content>
+          {{ addText }}
+        </template>
         <template #trigger>
-          <!--
-            TODO:
-            1. dropdown & tooltip should not be both visible: when dropdown visible, hide the tooltip
-            2. the empty `div` should be avoided. It is now required due to `Runtime directive used on component with non-element root node. The directives will not function as intended.`
-           -->
-          <div>
-            <UITooltip>
-              <template #trigger>
-                <button class="add">
-                  <UIIcon class="icon" type="plus" />
-                </button>
-              </template>
-              {{ addText }}
-            </UITooltip>
-          </div>
+          <button class="add">
+            <UIIcon class="icon" type="plus" />
+          </button>
         </template>
-        <slot name="add-options"></slot>
-      </UIDropdown>
+      </UIDropdownWithTooltip>
     </div>
     <slot name="detail"></slot>
   </div>
@@ -33,11 +26,10 @@
 import { computed } from 'vue'
 import {
   UIIcon,
-  UIDropdown,
-  UITooltip,
   type Color,
   useUIVariables,
-  getCssVars
+  getCssVars,
+  UIDropdownWithTooltip
 } from '@/components/ui'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/editor/stage/BackdropDetail.vue b/spx-gui/src/components/editor/stage/BackdropDetail.vue
index 52c5dd43b..079bb1c47 100644
--- a/spx-gui/src/components/editor/stage/BackdropDetail.vue
+++ b/spx-gui/src/components/editor/stage/BackdropDetail.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { useModal } from '@/components/ui'
+import { useModal, UILoading } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
 import type { Backdrop } from '@/models/backdrop'
 import { useEditorCtx } from '../EditorContextProvider.vue'
diff --git a/spx-gui/src/components/ui/UIDropdown.vue b/spx-gui/src/components/ui/UIDropdown.vue
index 59cbf9250..31cb668c5 100644
--- a/spx-gui/src/components/ui/UIDropdown.vue
+++ b/spx-gui/src/components/ui/UIDropdown.vue
@@ -11,6 +11,7 @@
     :show-arrow="false"
     :style="{ marginTop: offset.y + 'px', marginLeft: offset.x + 'px' }"
     raw
+    @update:show="(v) => emit('update:visible', v)"
   >
     <template #trigger>
       <slot name="trigger"></slot>
@@ -58,6 +59,10 @@ withDefaults(
   }
 )
 
+const emit = defineEmits<{
+  'update:visible': [boolean]
+}>()
+
 const attachTo = usePopupContainer()
 
 const nPopoverRef = ref<InstanceType<typeof NPopover>>()
diff --git a/spx-gui/src/components/ui/UIDropdownWithTooltip.vue b/spx-gui/src/components/ui/UIDropdownWithTooltip.vue
new file mode 100644
index 000000000..8a105bebd
--- /dev/null
+++ b/spx-gui/src/components/ui/UIDropdownWithTooltip.vue
@@ -0,0 +1,43 @@
+<template>
+  <UIDropdown
+    trigger="click"
+    :visible="dropdownVisible"
+    @update:visible="handleDropdownVisibleChange"
+  >
+    <template #trigger>
+      <div>
+        <!--
+            TODO:
+            The empty `div` should be avoided. It is now required due to a warning: 
+            `Runtime directive used on component with non-element root node. The directives will not function as intended.`
+           -->
+        <UITooltip :visible="tooltipVisible" @update:visible="handleTooltipVisibleChange">
+          <template #trigger>
+            <slot name="trigger"></slot>
+          </template>
+          <slot name="tooltip-content"></slot>
+        </UITooltip>
+      </div>
+    </template>
+    <slot name="dropdown-content"></slot>
+  </UIDropdown>
+</template>
+
+<script setup lang="ts">
+import { UIDropdown, UITooltip } from '@/components/ui'
+import { ref } from 'vue'
+
+const dropdownVisible = ref(false)
+const tooltipVisible = ref(false)
+
+const handleDropdownVisibleChange = (v: boolean) => {
+  dropdownVisible.value = v
+  if (v) {
+    tooltipVisible.value = false
+  }
+}
+
+const handleTooltipVisibleChange = (v: boolean) => {
+  tooltipVisible.value = v && !dropdownVisible.value
+}
+</script>
diff --git a/spx-gui/src/components/ui/UITooltip.vue b/spx-gui/src/components/ui/UITooltip.vue
index 40942397f..2e40b57ba 100644
--- a/spx-gui/src/components/ui/UITooltip.vue
+++ b/spx-gui/src/components/ui/UITooltip.vue
@@ -1,5 +1,12 @@
 <template>
-  <NTooltip class="ui-tooltip" trigger="hover" :to="attachTo" :placement="placement">
+  <NTooltip
+    class="ui-tooltip"
+    trigger="hover"
+    :to="attachTo"
+    :placement="placement"
+    :show="visible"
+    @update:show="(v) => emit('update:visible', v)"
+  >
     <template #trigger>
       <slot name="trigger"></slot>
     </template>
@@ -16,12 +23,18 @@ export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-sta
 withDefaults(
   defineProps<{
     placement?: Placement
+    visible?: boolean
   }>(),
   {
-    placement: 'top'
+    placement: 'top',
+    visible: undefined
   }
 )
 
+const emit = defineEmits<{
+  'update:visible': [boolean]
+}>()
+
 const attachTo = usePopupContainer()
 </script>
 
diff --git a/spx-gui/src/components/ui/index.ts b/spx-gui/src/components/ui/index.ts
index 00a9c54bd..affc6a070 100644
--- a/spx-gui/src/components/ui/index.ts
+++ b/spx-gui/src/components/ui/index.ts
@@ -31,3 +31,4 @@ export * from './tab'
 export { default as UICode } from './UICode.vue'
 export { default as UIButtonGroup } from './UIButtonGroup.vue'
 export { default as UIButtonGroupItem } from './UIButtonGroupItem.vue'
+export { default as UIDropdownWithTooltip } from './UIDropdownWithTooltip.vue'