diff --git a/packages/demo/src/PageHome.vue b/packages/demo/src/PageHome.vue
index 9efce8c6..f8718482 100644
--- a/packages/demo/src/PageHome.vue
+++ b/packages/demo/src/PageHome.vue
@@ -95,7 +95,7 @@
             theme: 'info-tooltip',
             // Inline override
             placement,
-            offset: [0, 100],
+            distance: 100,
             ariaId: 'test-id',
           }"
           class="tooltip-target b2"
@@ -293,7 +293,7 @@
         </div>
 
         <VDropdown
-          :offset="[0, offset]"
+          :distance="offset"
           :placement="placement"
           :auto-hide="isAutoHiding"
           :disabled="!isEnabled"
@@ -461,7 +461,7 @@
           <VDropdown
             :triggers="[]"
             :shown="isOpen"
-            :offset="[0, 16]"
+            :distance="16"
             :auto-hide="false"
           >
             <button class="tooltip-target b1 popover-btn">
diff --git a/packages/demo/src/PageHoverDropdown.vue b/packages/demo/src/PageHoverDropdown.vue
index 5da04d48..62721534 100644
--- a/packages/demo/src/PageHoverDropdown.vue
+++ b/packages/demo/src/PageHoverDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="box">
     <VMenu
-      :offset="[0, 16]"
+      :distance="16"
       placement="right"
     >
       <button class="tooltip-target b1 popover-btn">Target</button>
@@ -13,7 +13,7 @@
 
     <VDropdown
       :triggers="['hover']"
-      :offset="[0, 16]"
+      :distance="16"
       :auto-hide="false"
       placement="right"
     >
diff --git a/packages/docs/src/.vuepress/components/ArrowPadding.vue b/packages/docs/src/.vuepress/components/ArrowPadding.vue
index 94947f73..98d33020 100644
--- a/packages/docs/src/.vuepress/components/ArrowPadding.vue
+++ b/packages/docs/src/.vuepress/components/ArrowPadding.vue
@@ -4,11 +4,10 @@
       :triggers="[]"
       :shown="true"
       placement="right"
-      :offset="offset"
-      :modifiers="[
-        { name: 'preventOverflow', enabled: false },
-        { name: 'arrow', options: { padding: tempPadding } },
-      ]"
+      :distance="offset[1]"
+      :skidding="offset[0]"
+      :prevent-overflow="false"
+      :arrow-padding="tempPadding"
     >
       <button class="px-4 py-6 bg-gray-500 text-white rounded-lg !md:text-sm">
         Reference
@@ -24,8 +23,8 @@
       <input
         v-model.number="offset[0]"
         type="range"
-        min="-32"
-        max="32"
+        min="-64"
+        max="64"
         class="w-full"
       >
 
diff --git a/packages/docs/src/.vuepress/components/DropdownSimpleExample.vue b/packages/docs/src/.vuepress/components/DropdownSimpleExample.vue
index 35acaa41..169814ee 100644
--- a/packages/docs/src/.vuepress/components/DropdownSimpleExample.vue
+++ b/packages/docs/src/.vuepress/components/DropdownSimpleExample.vue
@@ -6,7 +6,9 @@
       </button>
 
       <template #popper>
-        This is awesome!
+        <div class="p-6">
+          This is awesome!
+        </div>
       </template>
     </VDropdown>
   </div>
diff --git a/packages/docs/src/.vuepress/components/MenuSimpleExample.vue b/packages/docs/src/.vuepress/components/MenuSimpleExample.vue
index 6843fa1a..f78a8c1e 100644
--- a/packages/docs/src/.vuepress/components/MenuSimpleExample.vue
+++ b/packages/docs/src/.vuepress/components/MenuSimpleExample.vue
@@ -7,7 +7,7 @@
 
       <template #popper>
         <button
-          class="border border-gray-300 rounded px-4 py-2"
+          class="border border-gray-300 rounded px-4 py-2 m-4"
           @click="count++"
         >
           +{{ count }}
diff --git a/packages/docs/src/.vuepress/components/OffsetExample.vue b/packages/docs/src/.vuepress/components/OffsetExample.vue
index dbb89143..615a6c3d 100644
--- a/packages/docs/src/.vuepress/components/OffsetExample.vue
+++ b/packages/docs/src/.vuepress/components/OffsetExample.vue
@@ -5,10 +5,10 @@
       :shown="true"
       :auto-hide="false"
       placement="right"
-      :offset="tempOffset"
-      :modifiers="[
-        { name: 'preventOverflow', enabled: false }
-      ]"
+      :distance="tempOffset[1]"
+      :skidding="tempOffset[0]"
+      :prevent-overflow="false"
+      :arrow-padding="6"
     >
       <button class="px-4 py-12 md:p-16 bg-gray-500 text-white rounded-lg !md:text-sm">
         Reference
diff --git a/packages/docs/src/.vuepress/components/TooltipHtml.vue b/packages/docs/src/.vuepress/components/TooltipHtml.vue
index a66b9b9e..eb79e63d 100644
--- a/packages/docs/src/.vuepress/components/TooltipHtml.vue
+++ b/packages/docs/src/.vuepress/components/TooltipHtml.vue
@@ -7,9 +7,7 @@
         placement: 'right',
         triggers: [],
         shown: true,
-        modifiers: [
-          { name: 'preventOverflow', enabled: false },
-        ],
+        preventOverflow: false,
       }"
       class="border border-gray-300 rounded px-4 py-2"
     >
diff --git a/packages/docs/src/.vuepress/components/TooltipPlacement.vue b/packages/docs/src/.vuepress/components/TooltipPlacement.vue
index aff317fd..20ae6575 100644
--- a/packages/docs/src/.vuepress/components/TooltipPlacement.vue
+++ b/packages/docs/src/.vuepress/components/TooltipPlacement.vue
@@ -6,10 +6,8 @@
         placement,
         triggers: [],
         shown: true,
-        modifiers: [
-          { name: 'preventOverflow', enabled: false },
-          { name: 'arrow', options: { padding: 8 } },
-        ],
+        preventOverflow: false,
+        arrowPadding: 8,
       }"
       class="border border-gray-300 rounded px-4 py-3 text-xl"
     >
diff --git a/packages/docs/src/.vuepress/components/theme-editor/Button.vue b/packages/docs/src/.vuepress/components/theme-editor/Button.vue
index 6c66267b..7482f578 100644
--- a/packages/docs/src/.vuepress/components/theme-editor/Button.vue
+++ b/packages/docs/src/.vuepress/components/theme-editor/Button.vue
@@ -11,6 +11,23 @@ export default {
       default: false,
     },
   },
+
+  created () {
+    this.colors = {
+      green: {
+        normal: 'bg-green-300 text-green-900',
+        hover: 'hover:bg-green-200 hover:text-green-900',
+      },
+      red: {
+        normal: 'bg-red-300 text-red-900',
+        hover: 'hover:bg-red-200 hover:text-red-900',
+      },
+      gray: {
+        normal: 'bg-gray-300 text-gray-900',
+        hover: 'hover:bg-gray-200 hover:text-gray-900',
+      },
+    }
+  },
 }
 </script>
 
@@ -18,9 +35,9 @@ export default {
   <button
     class="flex items-center justify-center rounded text-center"
     :class="[
-      `hover:bg-${color}-200 hover:text-${color}-900`,
+      colors[color].hover,
       {
-        [`bg-${color}-300 text-${color}-900`]: !flat,
+        [colors[color].normal]: !flat,
       },
     ]"
     @click="$emit('click', $event)"
diff --git a/packages/docs/src/.vuepress/components/theme-editor/ConfigEditor.vue b/packages/docs/src/.vuepress/components/theme-editor/ConfigEditor.vue
index 0453b52e..826cd4bd 100644
--- a/packages/docs/src/.vuepress/components/theme-editor/ConfigEditor.vue
+++ b/packages/docs/src/.vuepress/components/theme-editor/ConfigEditor.vue
@@ -1,14 +1,24 @@
 <script>
 import { builtinThemes } from './builtin-themes'
 import { mapState, state } from './state'
-import { placements } from '@popperjs/core'
-import { SHOW_EVENT_MAP } from 'floating-vue'
+import { SHOW_EVENT_MAP, placements } from 'floating-vue'
 import { ToolIcon } from 'vue-feather-icons'
 import Tabs from './Tabs.vue'
 import { loadValue, storeValue } from './util'
 
 const TAB_KEY = 'v-tooltip.theme-editor.config-tab'
 
+function inheritFactory (prop, defaultFactory) {
+  return {
+    get () {
+      return this.theme.config[prop] == null
+    },
+    set (value) {
+      this.theme.config[prop] = value ? undefined : defaultFactory()
+    },
+  }
+}
+
 export default {
   components: {
     ToolIcon,
@@ -33,41 +43,19 @@ export default {
       ]
     },
 
-    inheritTriggers: {
-      get () {
-        return this.theme.config.triggers == null
-      },
-      set (value) {
-        this.theme.config.triggers = value ? undefined : []
-      },
-    },
+    inheritTriggers: inheritFactory('triggers', () => []),
 
-    inheritOffset: {
-      get () {
-        return this.theme.config.offset == null
-      },
-      set (value) {
-        this.theme.config.offset = value ? undefined : [0, 0]
-      },
-    },
+    inheritDistance: inheritFactory('distance', () => 0),
 
-    inheritDelay: {
-      get () {
-        return this.theme.config.delay == null
-      },
-      set (value) {
-        this.theme.config.delay = value ? undefined : { show: 0, hide: 0 }
-      },
-    },
+    inheritSkidding: inheritFactory('skidding', () => 0),
 
-    inheritLoadingContent: {
-      get () {
-        return this.theme.config.loadingContent == null
-      },
-      set (value) {
-        this.theme.config.loadingContent = value ? undefined : '...'
-      },
-    },
+    inheritDelay: inheritFactory('delay', () => ({ show: 0, hide: 0 })),
+
+    inheritLoadingContent: inheritFactory('loadingContent', () => '...'),
+
+    inheritArrowPadding: inheritFactory('arrowPadding', () => 0),
+
+    inheritOverflowPadding: inheritFactory('overflowPadding', () => 0),
   },
 
   watch: {
@@ -294,41 +282,78 @@ export default {
       </div>
 
       <div class="flex space-x-3 hover:bg-gray-50 p-2">
-        <span>Offset (px):</span>
+        <span>Distance (px):</span>
+        <label class="flex items-center space-x-1">
+          <input
+            v-model="inheritDistance"
+            type="checkbox"
+          >
+          <span>(inherit)</span>
+        </label>
+        <template v-if="!inheritDistance">
+          <input
+            id="distance"
+            v-model.number="theme.config.distance"
+            type="number"
+            class="w-0 flex-1"
+          >
+          <input
+            v-model.number="theme.config.distance"
+            type="range"
+            min="-64"
+            max="64"
+            class="w-0 flex-1"
+          >
+        </template>
+      </div>
+
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Skidding (px):</span>
         <label class="flex items-center space-x-1">
           <input
-            v-model="inheritOffset"
+            v-model="inheritSkidding"
             type="checkbox"
           >
           <span>(inherit)</span>
         </label>
-        <template v-if="!inheritOffset">
-          <label for="skidding">Skidding:</label>
+        <template v-if="!inheritSkidding">
           <input
             id="skidding"
-            v-model.number="theme.config.offset[0]"
+            v-model.number="theme.config.skidding"
             type="number"
             class="w-0 flex-1"
           >
           <input
-            v-model.number="theme.config.offset[0]"
+            v-model.number="theme.config.skidding"
             type="range"
-            min="-32"
+            min="-64"
             max="64"
             class="w-0 flex-1"
           >
-          <label for="distance">Distance:</label>
+        </template>
+      </div>
+
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Arrow padding (px):</span>
+        <label class="flex items-center space-x-1">
           <input
-            id="distance"
-            v-model.number="theme.config.offset[1]"
+            v-model="inheritArrowPadding"
+            type="checkbox"
+          >
+          <span>(inherit)</span>
+        </label>
+        <template v-if="!inheritArrowPadding">
+          <input
+            id="arrowPadding"
+            v-model.number="theme.config.arrowPadding"
             type="number"
             class="w-0 flex-1"
           >
           <input
-            v-model.number="theme.config.offset[1]"
+            v-model.number="theme.config.arrowPadding"
             type="range"
             min="-32"
-            max="64"
+            max="32"
             class="w-0 flex-1"
           >
         </template>
@@ -382,6 +407,96 @@ export default {
         </label>
       </div>
 
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Prevent overflow:</span>
+        <label
+          v-for="value of [undefined, true, false]"
+          :key="value"
+          class="flex items-center space-x-1"
+        >
+          <input
+            v-model="theme.config.preventOverflow"
+            type="radio"
+            :value="value"
+          >
+          <span>{{ value != null ? value : '(inherit)' }}</span>
+        </label>
+      </div>
+
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Overflow padding (px):</span>
+        <label class="flex items-center space-x-1">
+          <input
+            v-model="inheritOverflowPadding"
+            type="checkbox"
+          >
+          <span>(inherit)</span>
+        </label>
+        <template v-if="!inheritOverflowPadding">
+          <input
+            id="arrowPadding"
+            v-model.number="theme.config.overflowPadding"
+            type="number"
+            class="w-0 flex-1"
+          >
+          <input
+            v-model.number="theme.config.overflowPadding"
+            type="range"
+            min="0"
+            max="128"
+            class="w-0 flex-1"
+          >
+        </template>
+      </div>
+
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Flip:</span>
+        <label
+          v-for="value of [undefined, true, false]"
+          :key="value"
+          class="flex items-center space-x-1"
+        >
+          <input
+            v-model="theme.config.flip"
+            type="radio"
+            :value="value"
+          >
+          <span>{{ value != null ? value : '(inherit)' }}</span>
+        </label>
+      </div>
+
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Shift:</span>
+        <label
+          v-for="value of [undefined, true, false]"
+          :key="value"
+          class="flex items-center space-x-1"
+        >
+          <input
+            v-model="theme.config.shift"
+            type="radio"
+            :value="value"
+          >
+          <span>{{ value != null ? value : '(inherit)' }}</span>
+        </label>
+      </div>
+
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Shift cross axis:</span>
+        <label
+          v-for="value of [undefined, true, false]"
+          :key="value"
+          class="flex items-center space-x-1"
+        >
+          <input
+            v-model="theme.config.shiftCrossAxis"
+            type="radio"
+            :value="value"
+          >
+          <span>{{ value != null ? value : '(inherit)' }}</span>
+        </label>
+      </div>
+
       <div class="flex space-x-3 hover:bg-gray-50 p-2">
         <span>Auto min size:</span>
         <label
@@ -397,6 +512,22 @@ export default {
           <span>{{ value != null ? value : '(inherit)' }}</span>
         </label>
       </div>
+
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Auto max size:</span>
+        <label
+          v-for="value of [undefined, true, false]"
+          :key="value"
+          class="flex items-center space-x-1"
+        >
+          <input
+            v-model="theme.config.autoMaxSize"
+            type="radio"
+            :value="value"
+          >
+          <span>{{ value != null ? value : '(inherit)' }}</span>
+        </label>
+      </div>
     </template>
 
     <template v-if="tab === 'directive'">
diff --git a/packages/docs/src/.vuepress/components/theme-editor/ThemeEditor.vue b/packages/docs/src/.vuepress/components/theme-editor/ThemeEditor.vue
index e23aebc1..af604491 100644
--- a/packages/docs/src/.vuepress/components/theme-editor/ThemeEditor.vue
+++ b/packages/docs/src/.vuepress/components/theme-editor/ThemeEditor.vue
@@ -163,7 +163,7 @@ export default {
     <!-- Footer -->
     <div class="footer flex-none flex items-center border-t border-gray-200 text-xs">
       <div class="px-4 py-1 text-gray-600">
-        v-tooltip <span class="text-black">v{{ version }}</span>
+        floating-vue <span class="text-black">v{{ version }}</span>
       </div>
 
       <div
diff --git a/packages/docs/src/.vuepress/components/theme-editor/state.js b/packages/docs/src/.vuepress/components/theme-editor/state.js
index 59f9f8ed..e8a8ba55 100644
--- a/packages/docs/src/.vuepress/components/theme-editor/state.js
+++ b/packages/docs/src/.vuepress/components/theme-editor/state.js
@@ -90,13 +90,22 @@ const emptyTheme = [
   'eagerMount',
   'placement',
   'strategy',
-  'offset',
+  'distance',
+  'skidding',
   'instantMove',
   'handleResize',
   'container',
   'boundary',
   'html',
   'loadingContent',
+  'arrowPadding',
+  'overflowPadding',
+  'preventOverflow',
+  'autoMinSize',
+  'autoMaxSize',
+  'flip',
+  'shift',
+  'shiftCrossAxis',
 ].reduce((obj, key) => {
   obj[key] = undefined
   return obj
diff --git a/packages/docs/src/.vuepress/config.js b/packages/docs/src/.vuepress/config.js
index 294b0178..91f1879f 100755
--- a/packages/docs/src/.vuepress/config.js
+++ b/packages/docs/src/.vuepress/config.js
@@ -50,11 +50,15 @@ module.exports = {
         text: 'Migration',
         items: [
           {
-            text: 'From v2',
+            text: 'From v-tooltip 2',
             link: '/migration/migration-from-v2',
           },
           {
-            text: 'Docs v2',
+            text: 'From v-tooltip 3 & 4',
+            link: '/migration/migration-from-v3',
+          },
+          {
+            text: 'v-tooltip docs',
             link: '/legacy/v2/',
           },
         ],
diff --git a/packages/docs/src/api/README.md b/packages/docs/src/api/README.md
index b0124104..654e37ae 100755
--- a/packages/docs/src/api/README.md
+++ b/packages/docs/src/api/README.md
@@ -283,12 +283,28 @@ Boolean that shows or hide the popper. You should probably use no trigger events
 <VDropdown :shown="isMenuShown" :triggers="[]" />
 ```
 
-### `offset`
+### `distance`
 
-An array to modify the position of the popper with relative pixels: `[skidding, distance]`
+Distance along the main axis relative to the reference (pixels).
 
 ```vue
-<VDropdown :offset="[0, 12]" />
+<VDropdown :distance="12" />
+```
+
+### `skidding`
+
+Skidding along the cross axis relative to the reference (pixels).
+
+```vue
+<VDropdown :distance="12" />
+```
+
+### `arrowPadding`
+
+Padding of the arrow relative to the popper bounds to prevent it from overflowing if you have rounded borders on the popper (pixels).
+
+```vue
+<VDropdown :arrow-padding="12" />
 ```
 
 ### `container`
@@ -369,6 +385,8 @@ Example:
 </style>
 ```
 
+[Live example](../guide/css.md#zoom-show-only-example)
+
 ### `autoMinSize`
 
 Boolean: set a minimum size to the popper `inner` container depending on the size of the reference.
@@ -381,39 +399,58 @@ If the final placement is `left-*` or `right-*`, the `minHeight` will be the ref
 <VDropdown auto-min-size />
 ```
 
-### `ariaId`
+### `autoMaxSize`
 
-Id used for the `aria-describedby` attribute. By default a random id.
+Boolean: let floating vue resize the popper inner container to the available size (using `max-width` and `max-height`). It's very useful for a dropdown that should automatically shrink its size when it reaches the boundary.
 
-### `modifiers`
+```vue
+<VDropdown auto-max-size />
+```
 
-Array of Popper.js [modifier objects](https://popper.js.org/docs/v2/modifiers/).
+### `preventOverflow`
 
-For example, to disable the `flip` modifier:
+Boolean: prevent the popper from overflowing the `boundary`.
 
 ```vue
-<VDropdown
-  :modifiers="[
-    {
-      name: 'flip',
-      enabled: false,
-    },
-  ]"
-/>
+<VDropdown :prevent-overflow="false" />
 ```
 
-### `popperOptions`
+### `overflowPadding`
 
-Other [Popper.js options](https://popper.js.org/docs/v2/constructors/). It's recommended to use props when available instead of the popper options to optimize the component updates.
+Virtual padding in the `boundary` used to prevent the popper overflow (pixels).
 
 ```vue
-<VDropdown
-  :popper-options="{
-    onFirstUpdate: (state) => {},
-  }"
-/>
+<VDropdown :overflow-padding="10" />
 ```
 
+### `flip`
+
+Boolean: prevent the popper from overflowing the `boundary` by using an opposite placement if needed.
+
+```vue
+<VDropdown :flip="false" />
+```
+
+### `shift`
+
+Boolean: prevent the popper from overflowing the `boundary` by adjusting its position.
+
+```vue
+<VDropdown :shift="false" />
+```
+
+### `shiftCrossAxis`
+
+Boolean: prevent the popper from overflowing the `boundary` by adjusting its position.
+
+```vue
+<VDropdown shift-cross-axis />
+```
+
+### `ariaId`
+
+Id used for the `aria-describedby` attribute. By default a random id.
+
 ## Component slots
 
 ### `default`
diff --git a/packages/docs/src/guide/component.md b/packages/docs/src/guide/component.md
index a5a878ae..af680a50 100644
--- a/packages/docs/src/guide/component.md
+++ b/packages/docs/src/guide/component.md
@@ -221,22 +221,3 @@ Close all the poppers in the page with the `all` modifier:
 ```vue
 <a v-close-popper.all>Close All</a>
 ```
-
-## Modifiers
-
-Modifiers should now always be specified with the `modifiers` prop instead of the `popperOptions` because additional processing is done on them before passing them to PopperJS.
-
-`modifiers` is an array of objects configuring the PopperJS modifiers, [learn more here](https://popper.js.org/docs/v2/modifiers/).
-
-Example:
-
-```html
-<VDropdown
-  :modifiers="[
-    {
-      name: 'flip',
-      enabled: false,
-    },
-  ]"
-/>
-```
diff --git a/packages/docs/src/guide/config.md b/packages/docs/src/guide/config.md
index 47ac4c2e..30b47a01 100644
--- a/packages/docs/src/guide/config.md
+++ b/packages/docs/src/guide/config.md
@@ -31,11 +31,13 @@ FloatingVue.options.themes.dropdown.offset = [0, 12]
 The default global options are:
 
 ```js
-export const config = {
+export const config: FloatingVueConfig = {
   // Disable popper components
   disabled: false,
-  // Default position offset [skidding, distance] (px)
-  offset: [0, 5],
+  // Default position offset along main axis (px)
+  distance: 5,
+  // Default position offset along cross axis (px)
+  skidding: 0,
   // Default container where the tooltip will be appended
   container: 'body',
   // Element used to compute position and size boundaries
@@ -48,10 +50,16 @@ export const config = {
   popperTriggers: [],
   // Positioning strategy
   strategy: 'absolute',
-  // Popperjs modifiers
-  modifiers: [],
-  // Other options passed to Popperjs constructor
-  popperOptions: {},
+  // Prevent overflow
+  preventOverflow: true,
+  // Flip to the opposite placement if needed
+  flip: true,
+  // Shift on the cross axis to prevent the popper from overflowing
+  shift: true,
+  // Overflow padding (px)
+  overflowPadding: 0,
+  // Arrow padding (px)
+  arrowPadding: 0,
   // Themes
   themes: {
     tooltip: {
diff --git a/packages/docs/src/guide/css.md b/packages/docs/src/guide/css.md
index 6079f752..45459e5e 100644
--- a/packages/docs/src/guide/css.md
+++ b/packages/docs/src/guide/css.md
@@ -115,6 +115,7 @@ HTML result:
                                     'v-popper__popper--shown',
                                     'v-popper__popper--hidden',
                                     'v-popper__popper--skip-transition',
+                                    'v-popper__popper--arrow-overflow',
                                     'v-popper__popper--show-from',
                                     'v-popper__popper--show-to',
                                     'v-popper__popper--hide-from',
@@ -134,13 +135,23 @@ HTML result:
 </div>
 ```
 
+You probably want to put a default padding on all dropdowns and menus:
+
+```css
+.v-popper--theme-dropdown .v-popper__inner {
+  padding: 6px;
+}
+```
+
 The `popper` element has several dynamic classes:
 
 - `v-popper__popper--shown`: the popper is shown.
 - `v-popper__popper--hidden`: the popper is hidden.
 - `v-popper__popper--skip-transition`: the transition should be skipped.
+- `v-popper__popper--arrow-overflow`: the arrow is overflowing past the reference, and should probably be hidden.
+
 
-Example style:
+Full example style:
 
 ```css
 .v-popper--theme-my-theme .v-popper__inner {
diff --git a/packages/docs/src/guide/directive.md b/packages/docs/src/guide/directive.md
index b078158f..db4cbef0 100644
--- a/packages/docs/src/guide/directive.md
+++ b/packages/docs/src/guide/directive.md
@@ -108,9 +108,7 @@ To fix this, specify the `padding` option of the `arrow` modifier. In the follow
 ```vue
 <button v-tooltip="{
   content: 'Hello',
-  modifiers: [
-    { name: 'arrow', options: { padding: 8 } },
-  ],
+  arrowPadding: 8,
 }">
 ```
 
diff --git a/packages/docs/src/migration/migration-from-v2.md b/packages/docs/src/migration/migration-from-v2.md
index b703ec74..8b65a0b8 100644
--- a/packages/docs/src/migration/migration-from-v2.md
+++ b/packages/docs/src/migration/migration-from-v2.md
@@ -2,7 +2,7 @@
 sidebar: auto
 ---
 
-# Migration from v-tooltip
+# Migration from v-tooltip 2
 
 floating-vue is a complete rewrite compared to v-tooltip. This migration guide will help you upgrade!
 
@@ -19,9 +19,9 @@ floating-vue is a complete rewrite compared to v-tooltip. This migration guide w
 | 2.x          | latest  | 3.x               |
 | 1.x          | vue2    | 2.x               |
 
-### PopperJS 2
+### Floating UI
 
-The underlying positionning library called PopperJS got upgraded from v1 to v2 which includes [a lot of breaking changes](https://popper.js.org/docs/v2/migration-guide/). This is a rewrite of the library so behavior might not be strictly identical to PopperJS v1.
+The positionning library has changed from `popperjs` to [`floating-ui`](https://floating-ui.com/) which is the spiritual successor.
 
 ### Global configuration
 
@@ -39,7 +39,7 @@ The global configuration object has completly changed. Instead of having a lot o
 - `defaultOffset`: use `offset`
 - `defaultContainer`: use `container`
 - `defaultBoundariesElement`: use `boundary`
-- `defaultPopperOptions`: use `popperOptions`
+- `defaultPopperOptions`: removed
 - `defaultLoadingClass`: removed
 - `defaultLoadingContent`: use `loadingContent` in the `tooltip` theme (or any theme that you use with the directive)
 - `autoHide`: unchanged
@@ -215,11 +215,7 @@ There are a range of new props accompanying `triggers`:
 
 ### Offset
 
-The `offset` is now an array in the following format:
-
-```js
-[skidding, distance]
-```
+The `offset` is now two separate props: `distance` and `skidding`.
 
 Before:
 
@@ -233,7 +229,8 @@ After:
 
 ```html
 <VDropdown
-  :offset="[0, 10]"
+  distance="10"
+  skidding="0"
 />
 ```
 
@@ -323,8 +320,8 @@ The following props were removed and are no longer available:
 - `popoverArrowClass`
 - `popoverInnerClass`
 - `openClass`
-
-CSS classes [were changed](#css-classes) and in most case you should be fine not customizing them.
+- `modifiers`
+- `popperOptions`
 
 ### CSS classes
 
@@ -532,34 +529,180 @@ After:
 
 ### Modifiers
 
-Modifiers should now always be specified with the `modifiers` prop instead of the `popperOptions` because additional processing is done on them before passing them to PopperJS.
+`floating-ui` doesn't have a modifier system like popperjs. It has been replaced with new props.
 
-The modifiers syntax changed and is now an array of objects, [learn more here](https://popper.js.org/docs/v2/modifiers/).
+#### Prevent overflow
 
-Before:
+New props: 
 
-```html
-<v-popper
-  :popper-options="{
-    modifiers: {
-      flip: {
-        enabled: false,
-      },
-    },
-  }"
-/>
+- `preventOverflow` (boolean)
+- `overflowPadding` (px)
+- `shiftCrossAxis` (boolean)
+
+```vue
+<!-- Before -->
+<VDropdown :popper-options="{
+  modifiers: { preventOverflow: { enabled: false } }
+}" />
+
+<!-- After -->
+<VDropdown :prevent-overflow="false" />
 ```
 
-After:
+```vue
+<!-- Before -->
+<VDropdown :popper-options="{
+  modifiers: { preventOverflow: { options: { padding: 10 } } }
+}" />
 
-```html
-<VDropdown
-  :modifiers="[
-    {
-      name: 'flip',
-      enabled: false,
+<!-- After -->
+<VDropdown :overflow-padding="10" />
+```
+
+```vue
+<!-- Before -->
+<VDropdown :popper-options="{
+  modifiers: { preventOverflow: { options: { altAxis: true } } }
+}" />
+
+<!-- After -->
+<VDropdown shift-cross-axis />
+```
+
+#### Flip
+
+New prop:
+
+- `flip` (boolean)
+
+```vue
+<!-- Before -->
+<VDropdown :popper-options="{
+  modifiers: { flip: { enabled: false } }
+}" />
+
+<!-- After -->
+<VDropdown :flip="false" />
+```
+
+#### Arrow
+
+New prop:
+
+- `arrowPadding` (px)
+
+```vue
+<!-- Before -->
+<VDropdown :popper-options="{
+  modifiers: { arrow: { options: { padding: 12 } } }
+}" />
+
+<!-- After -->
+<VDropdown :arrow-padding="12" />
+```
+
+## New features
+
+The new package supports Vue 3 in addition to Vue 2.
+
+### Themes
+
+Themes are a powerful and simple way to create multiple kinds of floating components. Application usually have many of them: tooltip, dropdown, menus, selects, etc. Each theme specify the default props values or/and the styling through the associated CSS classes.
+
+Themes can extend each other:
+
+```js
+app.use(FloatingVue, {
+  themes: {
+    select: {
+      $extend: 'dropdown', // builtin theme
+      triggers: ['click', 'touch', 'hover', 'focus'],
+      distance: 6,
+      delay: 0,
     },
-  ]"
-/>
+    'multi-select': {
+      $extend: 'select',
+      triggers: ['click', 'touch'],
+      distance: 10,
+    },
+  },
+})
 ```
 
+[Learn more](../guide/themes.md)
+
+### Global configuration
+
+The global configuration is now simply an object of the popper props (except special properties starting with `$` such as `$extend` and `$resetCss`, in addition to `themes`). The values will be used by default.
+
+[Learn more](../guide/config.md)
+
+### Unified API
+
+Everything is simpler! The direct and the components now shares the same underlying `Popper` component with the same props (plus a few specific ones for the directive).
+
+```vue
+<button v-tooltip="{
+  triggers: ['click'],
+  distance: 12,
+}">Action</button>
+```
+
+```vue
+<VTooltip
+  :triggers="['click']"
+  :distance="12"
+>
+  <button>Action</button>
+</VTooltip>
+```
+
+### Built-in components
+
+floating-ui ships with pre-built component and a minimal CSS file to help you get started:
+
+```js
+import 'floating-vue/dist/style.css'
+```
+
+```vue
+<!-- 'dropdown' theme -->
+<VDropdown>
+  <button>Click me!</button>
+  <template #popper>
+    Nice job!
+  </template>
+</VDropdown>
+
+<!-- 'menu' theme -->
+<VMenu>
+  <button>Hover me!</button>
+  <template #popper>
+    More buttons here
+  </template>
+</VMenu>
+
+<!-- 'tooltip' theme -->
+<VTooltip>
+  <button>Hover me!</button>
+  <template #popper>
+    Some information
+  </template>
+</VTooltip>
+```
+
+### Auto min size
+
+You can now let floating vue restrict the popper inner container to the reference size (using `min-width` or `min-height`). Usually when creating form inputs such as selects, you probably want to apply the minimum width of the input to the popper.
+
+```vue
+<VDropdown auto-min-size />
+```
+
+### Auto max size
+
+You can now let floating vue resize the popper inner container to the available size (using `max-width` or `max-height`). It's very useful for a dropdown that should automatically shrink its size when it reaches the boundary.
+
+```vue
+<VDropdown auto-max-size />
+```
diff --git a/packages/docs/src/migration/migration-from-v3.md b/packages/docs/src/migration/migration-from-v3.md
new file mode 100644
index 00000000..603a565d
--- /dev/null
+++ b/packages/docs/src/migration/migration-from-v3.md
@@ -0,0 +1,138 @@
+---
+sidebar: auto
+---
+
+# Migration from v-tooltip 3 & 4
+
+## Breaking changes
+
+### Package rename
+
+Since the package has grown much past the `v-tooltip` directive, it has been renamed to `floating-vue`.
+
+| v-tooltip  | floating-vue | NPM Tag | Vue compatibility |
+| ---------- | ------------ | ------- | ----------------- |
+| 4.x-beta.x | 2.x          | latest  | 3.x               |
+| 3.x-beta.x | 1.x          | vue2    | 2.x               |
+
+### Popperjs
+
+The positionning library has changed from [`popperjs 2`](https://popper.js.org/) to [`floating-ui`](https://floating-ui.com/) which is the spiritual successor.
+
+### Offset
+
+As it was too confusing, the `offset` is now two separate props: `distance` and `skidding`.
+
+Before:
+
+```html
+<VDropdown
+  :offset="[0, 10]"
+/>
+```
+
+After:
+
+```html
+<VDropdown
+  distance="10"
+  skidding="0"
+/>
+```
+
+[Learn more](../guide/component.md#offset)
+
+### Removed props
+
+- `modifiers`
+- `popperOptions`
+
+### CSS
+
+The default `padding` for the `dropdown` theme has been removed. You can add your own padding like this:
+
+```css
+.v-popper--theme-dropdown .v-popper__inner {
+  padding: 6px;
+}
+```
+
+It will be added in a future Vue 3-only major version of floating-vue with CSS variables.
+
+### Modifiers
+
+`floating-ui` doesn't have a modifier system like popperjs. It has been replaced with new props.
+
+#### Prevent overflow
+
+New props: 
+
+- `preventOverflow` (boolean)
+- `overflowPadding` (px)
+- `shiftCrossAxis` (boolean)
+
+```vue
+<!-- Before -->
+<VDropdown :modifiers="[ { name: 'preventOverflow', enabled: false } ]" />
+
+<!-- After -->
+<VDropdown :prevent-overflow="false" />
+```
+
+```vue
+<!-- Before -->
+<VDropdown :modifiers="[ { name: 'preventOverflow', options: { padding: 10 } } ]" />
+
+<!-- After -->
+<VDropdown :overflow-padding="10" />
+```
+
+```vue
+<!-- Before -->
+<VDropdown :modifiers="[ { name: 'preventOverflow', options: { altAxis: true } } ]" />
+
+<!-- After -->
+<VDropdown shift-cross-axis />
+```
+
+#### Flip
+
+New prop:
+
+- `flip` (boolean)
+
+```vue
+<!-- Before -->
+<VDropdown :modifiers="[ { name: 'flip', enabled: false } ]" />
+
+<!-- After -->
+<VDropdown :flip="false" />
+```
+
+#### Arrow
+
+New prop:
+
+- `arrowPadding` (px)
+
+```vue
+<!-- Before -->
+<VDropdown :modifiers="[ { name: 'arrow', options: { padding: 12 } } ]" />
+
+<!-- After -->
+<VDropdown :arrow-padding="12" />
+```
+
+## New features
+
+### `v-popper__popper--arrow-overflow`
+
+The `v-popper__popper--arrow-overflow` class is added on the `v-popper_popper` element when the arrow is overflowing past the reference bounds. By default, `v-popper__arrow-container` has `visibility: hidden` which hides the arrow.
+
+### Auto max size
+
+You can now let floating vue resize the popper inner container to the available size (using `max-width` and `max-height`). It's very useful for a dropdown that should automatically shrink its size when it reaches the boundary.
+
+```vue
+<VDropdown auto-max-size />
+```
diff --git a/packages/docs/tailwind.config.js b/packages/docs/tailwind.config.js
index 2c80c7ca..935b44cf 100644
--- a/packages/docs/tailwind.config.js
+++ b/packages/docs/tailwind.config.js
@@ -28,16 +28,11 @@ module.exports = {
 
   darkMode: 'class',
 
+  mode: 'jit',
+
   purge: {
     content: [
       'src/.vuepress/components/**/*.vue',
     ],
-
-    options: {
-      safelist: [
-        /bg-\w+-(2|3)00/,
-        /text-\w+-900/,
-      ],
-    },
   },
 }
diff --git a/packages/floating-vue/package.json b/packages/floating-vue/package.json
index 0aa00fd1..4d6effe9 100644
--- a/packages/floating-vue/package.json
+++ b/packages/floating-vue/package.json
@@ -15,7 +15,7 @@
   "module": "dist/floating-vue.esm.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@popperjs/core": "^2.11.0",
+    "@floating-ui/dom": "^0.1.10",
     "vue-resize": "^1.0.0"
   },
   "peerDependencies": {
diff --git a/packages/floating-vue/src/components/Dropdown.vue b/packages/floating-vue/src/components/Dropdown.vue
index 04b0d099..8105c245 100644
--- a/packages/floating-vue/src/components/Dropdown.vue
+++ b/packages/floating-vue/src/components/Dropdown.vue
@@ -12,7 +12,6 @@ export default {
 .v-popper--theme-dropdown .v-popper__inner {
   background: #fff;
   color: black;
-  padding: 6px;
   border-radius: 6px;
   border: 1px solid #ddd;
   box-shadow: 0 6px 30px rgba(0, 0, 0, .1);
diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts
index 3d545c3e..0d7557c2 100644
--- a/packages/floating-vue/src/components/Popper.ts
+++ b/packages/floating-vue/src/components/Popper.ts
@@ -1,13 +1,22 @@
-import { createPopper, placements } from '@popperjs/core'
-import { supportsPassive, isIOS } from '../util/env'
-import { applyModifier } from '../util/popper'
 import {
-  SHOW_EVENT_MAP,
-  HIDE_EVENT_MAP,
-} from '../util/events'
+  autoPlacement,
+  computePosition,
+  offset,
+  shift,
+  flip,
+  arrow,
+  getScrollParents,
+  size,
+} from '@floating-ui/dom'
+import { supportsPassive, isIOS } from '../util/env'
+import { placements } from '../util/popper'
+import { SHOW_EVENT_MAP, HIDE_EVENT_MAP } from '../util/events'
 import { removeFromArray } from '../util/lang'
+import { nextFrame } from '../util/frame'
 import { getDefaultConfig } from '../config'
 
+export type ComputePositionConfig = Parameters<typeof computePosition>[2]
+
 const shownPoppers = []
 let hidingPopper = null
 
@@ -16,6 +25,13 @@ if (typeof window !== 'undefined') {
   Element = window.Element
 }
 
+function defaultPropFactory (prop: string) {
+  return function (this: any) {
+    const props = this.$props
+    return getDefaultConfig(props.theme, prop)
+  }
+}
+
 export default () => ({
   name: 'VPopper',
 
@@ -40,11 +56,6 @@ export default () => ({
       required: true,
     },
 
-    arrowNode: {
-      type: Function,
-      default: null,
-    },
-
     shown: {
       type: Boolean,
       default: false,
@@ -62,158 +73,144 @@ export default () => ({
 
     disabled: {
       type: Boolean,
-      default () {
-        return getDefaultConfig(this.theme, 'disabled')
-      },
+      default: defaultPropFactory('disabled'),
     },
 
     placement: {
       type: String,
-      default () {
-        return getDefaultConfig(this.theme, 'placement')
-      },
+      default: defaultPropFactory('placement'),
       validator: value => placements.includes(value),
     },
 
     delay: {
       type: [String, Number, Object],
-      default () {
-        return getDefaultConfig(this.theme, 'delay')
-      },
+      default: defaultPropFactory('delay'),
     },
 
-    offset: {
-      type: [Array, Function],
-      default () {
-        return getDefaultConfig(this.theme, 'offset')
-      },
+    distance: {
+      type: [Number, String],
+      default: defaultPropFactory('distance'),
+    },
+
+    skidding: {
+      type: [Number, String],
+      default: defaultPropFactory('skidding'),
     },
 
     triggers: {
       type: Array,
-      default () {
-        return getDefaultConfig(this.theme, 'triggers')
-      },
+      default: defaultPropFactory('triggers'),
     },
 
     showTriggers: {
       type: [Array, Function],
-      default () {
-        return getDefaultConfig(this.theme, 'showTriggers')
-      },
+      default: defaultPropFactory('showTriggers'),
     },
 
     hideTriggers: {
       type: [Array, Function],
-      default () {
-        return getDefaultConfig(this.theme, 'hideTriggers')
-      },
+      default: defaultPropFactory('hideTriggers'),
     },
 
     popperTriggers: {
       type: Array,
-      default () {
-        return getDefaultConfig(this.theme, 'popperTriggers')
-      },
+      default: defaultPropFactory('popperTriggers'),
     },
 
     popperShowTriggers: {
       type: [Array, Function],
-      default () {
-        return getDefaultConfig(this.theme, 'popperShowTriggers')
-      },
+      default: defaultPropFactory('popperShowTriggers'),
     },
 
     popperHideTriggers: {
       type: [Array, Function],
-      default () {
-        return getDefaultConfig(this.theme, 'popperHideTriggers')
-      },
+      default: defaultPropFactory('popperHideTriggers'),
     },
 
     container: {
       type: [String, Object, Element, Boolean],
-      default () {
-        return getDefaultConfig(this.theme, 'container')
-      },
+      default: defaultPropFactory('container'),
     },
 
     boundary: {
       type: [String, Element],
-      default () {
-        return getDefaultConfig(this.theme, 'boundary')
-      },
+      default: defaultPropFactory('boundary'),
     },
 
     strategy: {
       type: String,
       validator: value => ['absolute', 'fixed'].includes(value),
-      default () {
-        return getDefaultConfig(this.theme, 'strategy')
-      },
-    },
-
-    modifiers: {
-      type: Array,
-      default () {
-        return getDefaultConfig(this.theme, 'modifiers')
-      },
-    },
-
-    popperOptions: {
-      type: Object,
-      default () {
-        return getDefaultConfig(this.theme, 'popperOptions')
-      },
+      default: defaultPropFactory('strategy'),
     },
 
     autoHide: {
       type: Boolean,
-      default () {
-        return getDefaultConfig(this.theme, 'autoHide')
-      },
+      default: defaultPropFactory('autoHide'),
     },
 
     handleResize: {
       type: Boolean,
-      default () {
-        return getDefaultConfig(this.theme, 'handleResize')
-      },
+      default: defaultPropFactory('handleResize'),
     },
 
     instantMove: {
       type: Boolean,
-      default () {
-        return getDefaultConfig(this.theme, 'instantMove')
-      },
+      default: defaultPropFactory('instantMove'),
     },
 
     eagerMount: {
       type: Boolean,
-      default () {
-        return getDefaultConfig(this.theme, 'eagerMount')
-      },
+      default: defaultPropFactory('eagerMount'),
     },
 
     popperClass: {
       type: [String, Array, Object],
-      default () {
-        return getDefaultConfig(this.theme, 'popperClass')
-      },
+      default: defaultPropFactory('popperClass'),
     },
 
     computeTransformOrigin: {
       type: Boolean,
-      default () {
-        return getDefaultConfig(this.theme, 'computeTransformOrigin')
-      },
+      default: defaultPropFactory('computeTransformOrigin'),
     },
 
     autoMinSize: {
       type: Boolean,
-      default () {
-        return getDefaultConfig(this.theme, 'autoMinSize')
-      },
+      default: defaultPropFactory('autoMinSize'),
+    },
+
+    autoMaxSize: {
+      type: Boolean,
+      default: defaultPropFactory('autoMaxSize'),
+    },
+
+    preventOverflow: {
+      type: Boolean,
+      default: defaultPropFactory('preventOverflow'),
+    },
+
+    overflowPadding: {
+      type: [Number, String],
+      default: defaultPropFactory('overflowPadding'),
+    },
+
+    arrowPadding: {
+      type: [Number, String],
+      default: defaultPropFactory('arrowPadding'),
+    },
+
+    flip: {
+      type: Boolean,
+      default: defaultPropFactory('flip'),
+    },
+
+    shift: {
+      type: Boolean,
+      default: defaultPropFactory('shift'),
+    },
+
+    shiftCrossAxis: {
+      type: Boolean,
+      default: defaultPropFactory('shiftCrossAxis'),
     },
   },
 
@@ -228,6 +225,18 @@ export default () => ({
         hideFrom: false,
         hideTo: true,
       },
+      result: {
+        x: 0,
+        y: 0,
+        placement: '',
+        strategy: this.strategy,
+        arrow: {
+          x: 0,
+          y: 0,
+          centerOffset: 0,
+        },
+        transformOrigin: null,
+      },
     }
   },
 
@@ -255,6 +264,7 @@ export default () => ({
           ...this.classes,
           popperClass: this.popperClass,
         },
+        result: this.result,
       }
     },
   },
@@ -271,26 +281,35 @@ export default () => ({
     },
 
     async container () {
-      if (this.isShown && this.popperInstance) {
-        this.$_ensureContainer()
-        await this.popperInstance.update()
+      if (this.isShown) {
+        this.$_ensureTeleport()
+        await this.$_computePosition()
       }
     },
 
     triggers () {
-      this.$_removeEventListeners()
-      this.$_addEventListeners()
+      if (!this.$_isDisposed) {
+        this.$_removeEventListeners()
+        this.$_addEventListeners()
+      }
     },
 
-    placement: '$_refreshPopperOptions',
-    offset: '$_refreshPopperOptions',
-    boundary: '$_refreshPopperOptions',
-    strategy: '$_refreshPopperOptions',
-    modifiers: '$_refreshPopperOptions',
-    popperOptions: {
-      handler: '$_refreshPopperOptions',
-      deep: true,
-    },
+    ...[
+      'placement',
+      'distance',
+      'skidding',
+      'boundary',
+      'strategy',
+      'overflowPadding',
+      'arrowPadding',
+      'preventOverflow',
+      'shift',
+      'shiftCrossAxis',
+      'flip',
+    ].reduce((acc, prop) => {
+      acc[prop] = '$_computePosition'
+      return acc
+    }, {}),
   },
 
   created () {
@@ -300,6 +319,7 @@ export default () => ({
 
   mounted () {
     this.init()
+    this.$_detachPopperNode()
   },
 
   activated () {
@@ -344,8 +364,11 @@ export default () => ({
       this.$_preventShow = false
 
       // Nodes
+      this.$_referenceNode = this.referenceNode()
       this.$_targetNodes = this.targetNodes().filter(e => e.nodeType === e.ELEMENT_NODE)
       this.$_popperNode = this.popperNode()
+      this.$_innerNode = this.$_popperNode.querySelector('.v-popper__inner')
+      this.$_arrowNode = this.$_popperNode.querySelector('.v-popper__arrow-container')
 
       this.$_swapTargetAttrs('title', 'data-original-title')
 
@@ -365,14 +388,9 @@ export default () => ({
       this.$_isDisposed = true
       this.$_removeEventListeners()
       this.hide({ skipDelay: true })
-
-      if (this.popperInstance) {
-        this.popperInstance.destroy()
-        this.$_detachPopperNode()
-      }
+      this.$_detachPopperNode()
 
       this.isMounted = false
-      this.popperInstance = null
       this.isShown = false
 
       this.$_swapTargetAttrs('data-original-title', 'title')
@@ -381,66 +399,136 @@ export default () => ({
     },
 
     async onResize () {
-      if (this.isShown && this.popperInstance) {
-        await this.popperInstance.update()
+      if (this.isShown) {
+        await this.$_computePosition()
         this.$emit('resize')
       }
     },
 
-    $_getPopperOptions () {
-      const popperOptions = {
-        ...this.popperOptions,
-        placement: this.placement,
-        strategy: this.strategy,
-        modifiers: this.modifiers,
-        onFirstUpdate: async state => {
-          if (this.popperOptions.onFirstUpdate) {
-            this.popperOptions.onFirstUpdate(state)
-          }
-          await this.$_applyShowEffect()
-        },
+    async $_computePosition () {
+      if (this.$_isDisposed) return
+
+      const options: ComputePositionConfig = {
+        middleware: [],
+      }
+
+      // Offset
+      if (this.distance || this.skidding) {
+        options.middleware.push(offset({
+          mainAxis: this.distance,
+          crossAxis: this.skidding,
+        }))
       }
 
-      if (!popperOptions.modifiers) {
-        popperOptions.modifiers = []
+      // Placement
+      const isPlacementAuto = this.placement.startsWith('auto')
+      if (isPlacementAuto) {
+        options.middleware.push(autoPlacement({
+          alignment: this.placement.split('-')[1] ?? '',
+        }))
+      } else {
+        options.placement = this.placement
       }
 
-      applyModifier(popperOptions.modifiers, 'arrow', {
-        options: {
-          element: (this.arrowNode && this.arrowNode()) || '[data-popper-arrow]',
+      if (this.preventOverflow) {
+        // Shift
+        if (this.shift) {
+          options.middleware.push(shift({
+            padding: this.overflowPadding,
+            boundary: this.boundary,
+            crossAxis: this.shiftCrossAxis,
+          }))
+        }
+
+        // Flip
+        if (!isPlacementAuto && this.flip) {
+          options.middleware.push(flip({
+            padding: this.overflowPadding,
+            boundary: this.boundary,
+          }))
+        }
+      }
+
+      // Arrow
+      options.middleware.push(arrow({
+        element: this.$_arrowNode,
+        padding: this.arrowPadding,
+      }))
+
+      // Arrow overflow
+      options.middleware.push({
+        name: 'arrowOverflow',
+        fn: ({ placement, rects, middlewareData }) => {
+          let overflow: boolean
+          const { centerOffset } = middlewareData.arrow
+          if (placement.startsWith('top') || placement.startsWith('bottom')) {
+            overflow = Math.abs(centerOffset) > rects.reference.width / 2
+          } else {
+            overflow = Math.abs(centerOffset) > rects.reference.height / 2
+          }
+          return {
+            data: {
+              overflow,
+            },
+          }
         },
       })
 
-      if (this.offset) {
-        applyModifier(popperOptions.modifiers, 'offset', {
-          options: {
-            offset: this.offset,
+      // Auto min size for the popper inner
+      if (this.autoMinSize) {
+        options.middleware.push({
+          name: 'autoMinSize',
+          fn: ({ rects, placement, middlewareData }) => {
+            if (middlewareData.autoMinSize?.skip) {
+              return {}
+            }
+            let width: number
+            let height: number
+            if (placement.startsWith('top') || placement.startsWith('bottom')) {
+              width = rects.reference.width
+            } else {
+              height = rects.reference.height
+            }
+            // Apply and re-compute
+            this.$_innerNode.style.minWidth = width != null ? `${width}px` : null
+            this.$_innerNode.style.minHeight = height != null ? `${height}px` : null
+            return {
+              data: {
+                skip: true,
+              },
+              reset: {
+                rects: true,
+              },
+            }
           },
         })
       }
 
-      if (this.boundary) {
-        applyModifier(popperOptions.modifiers, 'preventOverflow', {
-          options: {
-            boundary: this.boundary,
+      // Auto max size for the popper inner
+      if (this.autoMaxSize) {
+        options.middleware.push(size({
+          boundary: this.boundary,
+          padding: this.overflowPadding,
+          apply: ({ width, height }) => {
+            // Apply and re-compute
+            this.$_innerNode.style.maxWidth = width != null ? `${width}px` : null
+            this.$_innerNode.style.maxHeight = height != null ? `${height}px` : null
           },
-        })
-      }
-
-      if (!this.isShown) {
-        // Disable event listeners
-        applyModifier(popperOptions.modifiers, 'eventListeners', {
-          enabled: false,
-        })
+        }))
       }
 
-      return popperOptions
-    },
+      const data = await computePosition(this.$_referenceNode, this.$_popperNode, options)
 
-    async $_refreshPopperOptions () {
-      if (this.popperInstance) {
-        await this.popperInstance.setOptions(this.$_getPopperOptions())
-      }
+      Object.assign(this.result, {
+        x: data.x,
+        y: data.y,
+        placement: data.placement,
+        strategy: data.strategy,
+        arrow: {
+          ...data.middlewareData.arrow,
+          ...data.middlewareData.arrowOverflow,
+        },
+      })
     },
 
     $_scheduleShow (event = null, skipDelay = false) {
@@ -490,45 +578,23 @@ export default () => ({
         return
       }
 
-      if (!this.isMounted) {
-        this.$_ensureContainer()
-        this.isMounted = true
-      }
-
-      if (!this.popperInstance) {
-        this.popperInstance = createPopper(this.referenceNode(), this.$_popperNode, this.$_getPopperOptions())
-      } else {
-        await this.popperInstance.update()
-        // Enable event listeners
-        await this.$_refreshPopperOptions()
-        await this.$_applyShowEffect()
-      }
+      this.$_ensureTeleport()
+      await nextFrame()
+      await this.$_computePosition()
+      await this.$_applyShowEffect()
     },
 
     async $_applyShowEffect () {
       if (this.$_hideInProgress) return
 
-      let _referenceBounds
-      const getReferenceBounds = () => _referenceBounds || (_referenceBounds = this.referenceNode().getBoundingClientRect())
-
+      // Advanced animations
       if (this.computeTransformOrigin) {
-        const referenceBounds = getReferenceBounds()
+        const bounds = this.$_referenceNode.getBoundingClientRect()
         const popperWrapper = this.$_popperNode.querySelector('.v-popper__wrapper')
         const parentBounds = popperWrapper.parentNode.getBoundingClientRect()
-        const x = (referenceBounds.left + referenceBounds.width / 2) - (parentBounds.left + popperWrapper.offsetLeft)
-        const y = (referenceBounds.top + referenceBounds.height / 2) - (parentBounds.top + popperWrapper.offsetTop)
-        popperWrapper.style.transformOrigin = `${x}px ${y}px`
-      }
-
-      if (this.autoMinSize) {
-        const referenceBounds = getReferenceBounds()
-        const popperInner = this.$_popperNode.querySelector('.v-popper__inner')
-        const [mainPosition] = this.$_popperNode.dataset.popperPlacement.split('-')
-        if (mainPosition === 'left' || mainPosition === 'right') {
-          popperInner.style.minHeight = `${referenceBounds.height}px`
-        } else {
-          popperInner.style.minWidth = `${referenceBounds.width}px`
-        }
+        const x = (bounds.x + bounds.width / 2) - (parentBounds.left + popperWrapper.offsetLeft)
+        const y = (bounds.y + bounds.height / 2) - (parentBounds.top + popperWrapper.offsetTop)
+        this.result.transformOrigin = `${x}px ${y}px`
       }
 
       this.isShown = true
@@ -554,9 +620,6 @@ export default () => ({
 
       this.$emit('apply-show')
 
-      // Fix popper not applying the attribute on initial render :(
-      this.$_popperNode.setAttribute('data-popper-placement', this.popperInstance.state.placement)
-
       // Advanced classes
       this.classes.showFrom = true
       this.classes.showTo = false
@@ -584,11 +647,6 @@ export default () => ({
 
       this.isShown = false
 
-      if (this.popperInstance) {
-        // Disable event listeners
-        await this.$_refreshPopperOptions()
-      }
-
       this.$_applyAttrsToTarget({
         'aria-describedby': undefined,
         'data-popper-shown': undefined,
@@ -626,7 +684,9 @@ export default () => ({
       }
     },
 
-    $_ensureContainer () {
+    $_ensureTeleport () {
+      if (this.$_isDisposed) return
+
       let container = this.container
       // if container is a query, get the relative element
       if (typeof container === 'string') {
@@ -641,9 +701,19 @@ export default () => ({
       }
 
       container.appendChild(this.$_popperNode)
+      this.isMounted = true
     },
 
     $_addEventListeners () {
+      const addListeners = (targetNodes: any[], eventType: string, handler: (event: Event) => void) => {
+        this.$_events.push({ targetNodes, eventType, handler })
+        targetNodes.forEach(node => node.addEventListener(eventType, handler, supportsPassive
+          ? {
+            passive: true,
+          }
+          : undefined))
+      }
+
       const addEvents = (targetNodes, eventMap, commonTriggers, customTrigger, handler) => {
         let triggers = commonTriggers
 
@@ -654,12 +724,7 @@ export default () => ({
         triggers.forEach(trigger => {
           const eventType = eventMap[trigger]
           if (eventType) {
-            this.$_events.push({ targetNodes, eventType, handler })
-            targetNodes.forEach(node => node.addEventListener(eventType, handler, supportsPassive
-              ? {
-                passive: true,
-              }
-              : undefined))
+            addListeners(targetNodes, eventType, handler)
           }
         })
       }
@@ -689,6 +754,14 @@ export default () => ({
 
       addEvents(this.$_targetNodes, HIDE_EVENT_MAP, this.triggers, this.hideTriggers, handleHide)
       addEvents([this.$_popperNode], HIDE_EVENT_MAP, this.popperTriggers, this.popperHideTriggers, handleHide)
+
+      // Scroll
+      addListeners([
+        ...getScrollParents(this.$_referenceNode),
+        ...getScrollParents(this.$_popperNode),
+      ], 'scroll', () => {
+        this.$_computePosition()
+      })
     },
 
     $_removeEventListeners () {
@@ -717,12 +790,6 @@ export default () => ({
       }
     },
 
-    async $_handleGlobalResize (event) {
-      if (this.popperInstance) {
-        await this.popperInstance.update()
-      }
-    },
-
     $_detachPopperNode () {
       this.$_popperNode.parentNode && this.$_popperNode.parentNode.removeChild(this.$_popperNode)
     },
@@ -751,7 +818,7 @@ export default () => ({
     },
   },
 
-  render (h) {
+  render () {
     return this.$scopedSlots.default(this.slotData)[0]
   },
 })
@@ -774,7 +841,7 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
     window.addEventListener('mousedown', handleGlobalMousedown, true)
     window.addEventListener('click', handleGlobalClick, true)
   }
-  window.addEventListener('resize', handleGlobalResize)
+  window.addEventListener('resize', computePositionAllShownPoppers)
 }
 
 function handleGlobalMousedown (event) {
@@ -807,19 +874,13 @@ function handleGlobalClose (event, touch = false) {
   }
 }
 
-function handleGlobalResize (event) {
+function computePositionAllShownPoppers (event) {
   for (let i = 0; i < shownPoppers.length; i++) {
     const popper = shownPoppers[i]
-    popper.$_handleGlobalResize(event)
+    popper.$_computePosition(event)
   }
 }
 
-function nextFrame () {
-  return new Promise(resolve => requestAnimationFrame(() => {
-    requestAnimationFrame(resolve)
-  }))
-}
-
 export function hideAllPoppers () {
   for (let i = 0; i < shownPoppers.length; i++) {
     const popper = shownPoppers[i]
diff --git a/packages/floating-vue/src/components/PopperContent.vue b/packages/floating-vue/src/components/PopperContent.vue
index 5e4a4a80..ae2f4ce6 100644
--- a/packages/floating-vue/src/components/PopperContent.vue
+++ b/packages/floating-vue/src/components/PopperContent.vue
@@ -14,13 +14,24 @@
         'v-popper__popper--hide-from': classes.hideFrom,
         'v-popper__popper--hide-to': classes.hideTo,
         'v-popper__popper--skip-transition': skipTransition,
+        'v-popper__popper--arrow-overflow': result.arrow.overflow,
       },
     ]"
+    :style="{
+      position: result.strategy,
+      transform: `translate3d(${Math.round(result.x)}px,${Math.round(result.y)}px,0)`,
+    }"
     :aria-hidden="shown ? 'false' : 'true'"
     :tabindex="autoHide ? 0 : undefined"
+    :data-popper-placement="result.placement"
     @keyup.esc="autoHide && $emit('hide')"
   >
-    <div class="v-popper__wrapper">
+    <div
+      class="v-popper__wrapper"
+      :style="{
+        transformOrigin: result.transformOrigin,
+      }"
+    >
       <div
         ref="inner"
         class="v-popper__inner"
@@ -40,6 +51,10 @@
       <div
         ref="arrow"
         class="v-popper__arrow-container"
+        :style="{
+          left: toPx(result.arrow.x),
+          top: toPx(result.arrow.y),
+        }"
       >
         <div class="v-popper__arrow-outer" />
         <div class="v-popper__arrow-inner" />
@@ -72,6 +87,16 @@ export default {
     autoHide: Boolean,
     handleResize: Boolean,
     classes: Object,
+    result: Object,
+  },
+
+  methods: {
+    toPx (value) {
+      if (value != null && !isNaN(value)) {
+        return `${value}px`
+      }
+      return null
+    },
   },
 }
 </script>
@@ -79,6 +104,8 @@ export default {
 <style>
 .v-popper__popper {
   z-index: 10000;
+  top: 0;
+  left: 0;
 }
 
 .v-popper__popper.v-popper__popper--hidden {
@@ -101,13 +128,19 @@ export default {
 .v-popper__inner {
   position: relative;
   box-sizing: border-box;
+  overflow-y: auto;
 }
 
 .v-popper__arrow-container {
+  position: absolute;
   width: 10px;
   height: 10px;
 }
 
+.v-popper__popper--arrow-overflow .v-popper__arrow-container {
+  visibility: hidden;
+}
+
 .v-popper__arrow-inner,
 .v-popper__arrow-outer {
   border-style: solid;
diff --git a/packages/floating-vue/src/components/PopperWrapper.vue b/packages/floating-vue/src/components/PopperWrapper.vue
index 5df54e53..db5ae6c1 100644
--- a/packages/floating-vue/src/components/PopperWrapper.vue
+++ b/packages/floating-vue/src/components/PopperWrapper.vue
@@ -12,13 +12,13 @@
       handleResize,
       onResize,
       classes,
+      result,
     }"
     v-bind="$attrs"
     :theme="theme"
     :target-nodes="getTargetNodes"
     :reference-node="() => $refs.reference"
     :popper-node="() => $refs.popperContent.$el"
-    :arrow-node="() => $refs.popperContent.$refs.arrow"
     v-on="$listeners"
   >
     <div
@@ -47,6 +47,7 @@
         :auto-hide="autoHide"
         :handle-resize="handleResize"
         :classes="classes"
+        :result="result"
         @hide="hide"
         @resize="onResize"
       >
diff --git a/packages/floating-vue/src/components/TooltipDirective.vue b/packages/floating-vue/src/components/TooltipDirective.vue
index 9913d9c3..3c94e52a 100644
--- a/packages/floating-vue/src/components/TooltipDirective.vue
+++ b/packages/floating-vue/src/components/TooltipDirective.vue
@@ -11,6 +11,7 @@
       handleResize,
       onResize,
       classes,
+      result,
     }"
     v-bind="$attrs"
     :theme="theme"
@@ -33,6 +34,7 @@
       :auto-hide="autoHide"
       :handle-resize="handleResize"
       :classes="classes"
+      :result="result"
       @hide="hide"
       @resize="onResize"
     >
@@ -125,10 +127,9 @@ export default {
       immediate: true,
     },
 
-    finalContent (value) {
-      this.$nextTick(() => {
-        this.$refs.popper.onResize()
-      })
+    async finalContent (value) {
+      await this.$nextTick()
+      this.$refs.popper.onResize()
     },
   },
 
diff --git a/packages/floating-vue/src/config.ts b/packages/floating-vue/src/config.ts
index 68fb5fee..a1df1f86 100644
--- a/packages/floating-vue/src/config.ts
+++ b/packages/floating-vue/src/config.ts
@@ -3,8 +3,10 @@ export type FloatingVueConfig = any // @TODO
 export const config: FloatingVueConfig = {
   // Disable popper components
   disabled: false,
-  // Default position offset [skidding, distance] (px)
-  offset: [0, 5],
+  // Default position offset along main axis (px)
+  distance: 5,
+  // Default position offset along cross axis (px)
+  skidding: 0,
   // Default container where the tooltip will be appended
   container: 'body',
   // Element used to compute position and size boundaries
@@ -17,10 +19,16 @@ export const config: FloatingVueConfig = {
   popperTriggers: [],
   // Positioning strategy
   strategy: 'absolute',
-  // Popperjs modifiers
-  modifiers: [],
-  // Other options passed to Popperjs constructor
-  popperOptions: {},
+  // Prevent overflow
+  preventOverflow: true,
+  // Flip to the opposite placement if needed
+  flip: true,
+  // Shift on the cross axis to prevent the popper from overflowing
+  shift: true,
+  // Overflow padding (px)
+  overflowPadding: 0,
+  // Arrow padding (px)
+  arrowPadding: 0,
   // Themes
   themes: {
     tooltip: {
diff --git a/packages/floating-vue/src/directives/v-tooltip.spec.ts b/packages/floating-vue/src/directives/v-tooltip.spec.ts
index a2e32d22..a83f65be 100644
--- a/packages/floating-vue/src/directives/v-tooltip.spec.ts
+++ b/packages/floating-vue/src/directives/v-tooltip.spec.ts
@@ -1,9 +1,3 @@
-/* eslint-disable import/first */
-
-peeky.mockModule('@popperjs/core', () => ({
-  placements: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end'],
-}))
-
 import { describe, test, expect } from '@peeky/test'
 import * as VTooltip from './v-tooltip'
 
diff --git a/packages/floating-vue/src/directives/v-tooltip.ts b/packages/floating-vue/src/directives/v-tooltip.ts
index d1a6d6fd..e164a4fc 100644
--- a/packages/floating-vue/src/directives/v-tooltip.ts
+++ b/packages/floating-vue/src/directives/v-tooltip.ts
@@ -1,8 +1,8 @@
 import Vue from 'vue'
-import { placements } from '@popperjs/core'
 import TooltipDirective from '../components/TooltipDirective.vue'
 import { getDefaultConfig } from '../config'
 import PopperMethods from '../components/PopperMethods'
+import { placements } from '../util/popper'
 
 const TARGET_CLASS = 'v-popper--has-tooltip'
 
@@ -117,7 +117,7 @@ export function bind (el, { value, oldValue, modifiers }) {
     // Manual show
     if (typeof value.shown !== 'undefined' && value.shown !== el.$_popperOldShown) {
       el.$_popperOldShown = value.shown
-      value.shown ? tooltipApp.$refs.tooltip.show() : tooltipApp.$refs.tooltip.hide()
+      value.shown ? tooltipApp.show() : tooltipApp.hide()
     }
   }
 }
diff --git a/packages/floating-vue/src/index.ts b/packages/floating-vue/src/index.ts
index 0ca16002..7850a956 100644
--- a/packages/floating-vue/src/index.ts
+++ b/packages/floating-vue/src/index.ts
@@ -35,6 +35,8 @@ export const TooltipDirective = PrivateTooltipDirective
 // Utils
 export { hideAllPoppers } from './components/Popper'
 export * from './util/events'
+export { placements } from './util/popper'
+export type { Placement } from './util/popper'
 
 /* Vue plugin */
 
diff --git a/packages/floating-vue/src/util/frame.ts b/packages/floating-vue/src/util/frame.ts
new file mode 100644
index 00000000..a6cc7147
--- /dev/null
+++ b/packages/floating-vue/src/util/frame.ts
@@ -0,0 +1,5 @@
+export function nextFrame () {
+  return new Promise(resolve => requestAnimationFrame(() => {
+    requestAnimationFrame(resolve)
+  }))
+}
diff --git a/packages/floating-vue/src/util/popper.ts b/packages/floating-vue/src/util/popper.ts
index 9267b967..cbe2201b 100644
--- a/packages/floating-vue/src/util/popper.ts
+++ b/packages/floating-vue/src/util/popper.ts
@@ -1,3 +1,5 @@
+import type { Placement as BasePlacement } from '@floating-ui/dom'
+
 export function applyModifier (modifiers, name, data) {
   let modifier = modifiers.find(m => m.name === name)
 
@@ -19,3 +21,11 @@ export function applyModifier (modifiers, name, data) {
     }
   }
 }
+
+export type Placement = BasePlacement | 'auto' | 'auto-start' | 'auto-end'
+
+export const placements: Placement[] = ['auto', 'top', 'bottom', 'left', 'right'].reduce((acc, base) => acc.concat([
+  base,
+  `${base}-start`,
+  `${base}-end`,
+]), [])
diff --git a/packages/floating-vue/tsconfig.json b/packages/floating-vue/tsconfig.json
index 07012c36..6f3ce139 100644
--- a/packages/floating-vue/tsconfig.json
+++ b/packages/floating-vue/tsconfig.json
@@ -11,7 +11,8 @@
     ],
     "jsx": "preserve",
     "outDir": "dist",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "skipLibCheck": true
   },
   "include": [
     "src/**/*.ts",
diff --git a/packages/floating-vue/vite.config.ts b/packages/floating-vue/vite.config.ts
index 93536db4..5729de81 100644
--- a/packages/floating-vue/vite.config.ts
+++ b/packages/floating-vue/vite.config.ts
@@ -14,12 +14,12 @@ export default defineConfig({
     rollupOptions: {
       external: [
         'vue',
-        '@popperjs/core',
+        '@floating-ui/dom',
       ],
       output: {
         globals: {
           vue: 'Vue',
-          '@popperjs/core': 'Popper',
+          '@floating-ui/dom': 'FloatingUIDOM',
         },
       },
     },
diff --git a/yarn.lock b/yarn.lock
index 59184990..fd18f470 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1224,6 +1224,18 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.3.1.tgz#3dde0ad0724d4b730567c92f49f0950910e18871"
+  integrity sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==
+
+"@floating-ui/dom@^0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.1.10.tgz#ce304136a52c71ef157826d2ebf52d68fa2deed5"
+  integrity sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==
+  dependencies:
+    "@floating-ui/core" "^0.3.0"
+
 "@fullhuman/postcss-purgecss@^3.0.0":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339"
@@ -2364,11 +2376,6 @@
     merge-source-map "^1.1.0"
     pathe "^0.2.0"
 
-"@popperjs/core@^2.11.0":
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
-  integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
-
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"