diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index b9b3ca23..e33de4cd 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -40,7 +40,8 @@ import {
 } from '@headlessui/vue'
 import type { Ref, PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { defu } from 'defu'
 import NuxtLink from '#app/components/nuxt-link'
 import Icon from '../elements/Icon.vue'
 import Avatar from '../elements/Avatar.vue'
@@ -123,14 +124,13 @@ const props = defineProps({
   },
   popperOptions: {
     type: Object as PropType<PopperOptions>,
-    default: () => ({
-      placement: 'bottom-end',
-      strategy: 'fixed'
-    })
+    default: () => {}
   }
 })
 
-const [trigger, container] = usePopper(props.popperOptions)
+const popperOptions = computed(() => defu({}, props.popperOptions, { placement: 'bottom-end', strategy: 'fixed' }))
+
+const [trigger, container] = usePopper(popperOptions.value)
 
 function resolveItemClass ({ active, disabled }: { active: boolean, disabled: boolean }) {
   return classNames(
diff --git a/src/runtime/components/forms/SelectCustom.vue b/src/runtime/components/forms/SelectCustom.vue
index 7b3cb6de..aad2f160 100644
--- a/src/runtime/components/forms/SelectCustom.vue
+++ b/src/runtime/components/forms/SelectCustom.vue
@@ -85,6 +85,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import type { PropType, ComponentPublicInstance } from 'vue'
+import { defu } from 'defu'
 import {
   Combobox,
   ComboboxButton,
@@ -251,15 +252,15 @@ const props = defineProps({
   },
   popperOptions: {
     type: Object as PropType<PopperOptions>,
-    default: () => ({
-      placement: 'bottom-end'
-    })
+    default: () => {}
   }
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const [trigger, container] = usePopper(props.popperOptions)
+const popperOptions = computed(() => defu({}, props.popperOptions, { placement: 'bottom-end' }))
+
+const [trigger, container] = usePopper(popperOptions.value)
 
 const query = ref('')
 const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index f03995f3..3e88efe0 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -18,7 +18,8 @@
 
 <script setup lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { defu } from 'defu'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from './../types'
@@ -54,13 +55,13 @@ const props = defineProps({
   },
   popperOptions: {
     type: Object as PropType<PopperOptions>,
-    default: () => ({
-      strategy: 'fixed'
-    })
+    default: () => {}
   }
 })
 
-const [trigger, container] = usePopper(props.popperOptions)
+const popperOptions = computed(() => defu({}, props.popperOptions, { strategy: 'fixed' }))
+
+const [trigger, container] = usePopper(popperOptions.value)
 
 const popoverApi: Ref<any> = ref(null)
 
diff --git a/src/runtime/components/overlays/Tooltip.vue b/src/runtime/components/overlays/Tooltip.vue
index 2e919e7d..79215eb6 100644
--- a/src/runtime/components/overlays/Tooltip.vue
+++ b/src/runtime/components/overlays/Tooltip.vue
@@ -18,7 +18,8 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { defu } from 'defu'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from './../types'
 import $ui from '#build/ui'
@@ -50,14 +51,14 @@ const props = defineProps({
   },
   popperOptions: {
     type: Object as PropType<PopperOptions>,
-    default: () => ({
-      strategy: 'fixed'
-    })
+    default: () => {}
   }
 })
 
+const popperOptions = computed(() => defu({}, props.popperOptions, { strategy: 'fixed' }))
+
+const [trigger, container] = usePopper(popperOptions.value)
 const open = ref(false)
-const [trigger, container] = usePopper(props.popperOptions)
 </script>
 
 <script lang="ts">