diff --git a/package-lock.json b/package-lock.json
index da435a7fe0..aa7c84c363 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
 				"figlet": "^1.2.4",
 				"file-loader": "^6.0.0",
 				"find-up": "^4.1.0",
+				"floating-vue": "^1.0.0-beta.14",
 				"fs-extra": "^9.0.1",
 				"gh-pages": "^2.1.1",
 				"highlight.js": "^10.4.1",
@@ -1949,6 +1950,19 @@
 				"which": "bin/which"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+			"integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "0.1.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+			"integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+			"dependencies": {
+				"@floating-ui/core": "^0.3.0"
+			}
+		},
 		"node_modules/@fortawesome/fontawesome-free": {
 			"version": "5.15.4",
 			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
@@ -11109,6 +11123,18 @@
 			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz",
 			"integrity": "sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA=="
 		},
+		"node_modules/floating-vue": {
+			"version": "1.0.0-beta.14",
+			"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-1.0.0-beta.14.tgz",
+			"integrity": "sha512-75ADBk17Ke5hU/bZ+Kq0BpdQl/nzfK1Fz4AUwqFhg0vP11I/g2yv2VU4k120qHNL5+i7OXhr66b+i4pqEsuiRg==",
+			"dependencies": {
+				"@floating-ui/dom": "^0.1.10",
+				"vue-resize": "^1.0.0"
+			},
+			"peerDependencies": {
+				"vue": "^2.6.10"
+			}
+		},
 		"node_modules/flush-write-stream": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -25346,6 +25372,17 @@
 				"node": ">=4.0.0"
 			}
 		},
+		"node_modules/vue-resize": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+			"integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"vue": "^2.6.0"
+			}
+		},
 		"node_modules/vue-server-renderer": {
 			"version": "2.6.14",
 			"resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.14.tgz",
@@ -28262,6 +28299,19 @@
 				}
 			}
 		},
+		"@floating-ui/core": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+			"integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+		},
+		"@floating-ui/dom": {
+			"version": "0.1.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+			"integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+			"requires": {
+				"@floating-ui/core": "^0.3.0"
+			}
+		},
 		"@fortawesome/fontawesome-free": {
 			"version": "5.15.4",
 			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
@@ -35763,6 +35813,15 @@
 			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz",
 			"integrity": "sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA=="
 		},
+		"floating-vue": {
+			"version": "1.0.0-beta.14",
+			"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-1.0.0-beta.14.tgz",
+			"integrity": "sha512-75ADBk17Ke5hU/bZ+Kq0BpdQl/nzfK1Fz4AUwqFhg0vP11I/g2yv2VU4k120qHNL5+i7OXhr66b+i4pqEsuiRg==",
+			"requires": {
+				"@floating-ui/dom": "^0.1.10",
+				"vue-resize": "^1.0.0"
+			}
+		},
 		"flush-write-stream": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -47084,6 +47143,14 @@
 				}
 			}
 		},
+		"vue-resize": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+			"integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+			"requires": {
+				"@babel/runtime": "^7.13.10"
+			}
+		},
 		"vue-server-renderer": {
 			"version": "2.6.14",
 			"resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.14.tgz",
diff --git a/packages/vue-components/README.md b/packages/vue-components/README.md
index bb0f1daadb..b32eb9f7ad 100644
--- a/packages/vue-components/README.md
+++ b/packages/vue-components/README.md
@@ -12,8 +12,6 @@ Most of the styles are based on Bootstrap's markup and CSS, but no dependency on
 
 Many of the components under this folder were originally from [MarkBind/vue-strap](https://github.com/MarkBind/vue-strap), forked from [yuche/vue-strap](https://github.com/yuche/vue-strap), and modified to suit MarkBind's needs for educational and documentation websites.
 
-The generated bundle also includes some of [BootstrapVue's](https://bootstrap-vue.org/) components.
-
 Some custom components and directives are also added for MarkBind's use.
 
 ### MarkBind components newly created or revamped since moving here
@@ -21,9 +19,9 @@ Some custom components and directives are also added for MarkBind's use.
 - Question.vue
 - QOption.vue
 - Quiz.vue
-- Popover.vue (built on bootstrap-vue's popovers)
-- Tooltip.vue (built on bootstrap-vue's tooltips)
-- Trigger.vue (built on bootstrap-vue's popovers and tooltips)
+- Popover.vue (built on floating-vue's [Menu](https://floating-vue.starpad.dev/guide/component.html#hover-menu) component)
+- Tooltip.vue (built on floating-vue's [Tooltip](https://floating-vue.starpad.dev/guide/component.html#tooltip) component)
+- Trigger.vue (built on vue-final-modal's [$vfm API](https://vue-final-modal.org/api#api) and Floating Vue's Menus and Tooltips)
 
 ### MarkBind components ported from [MarkBind/vue-strap](https://github.com/MarkBind/vue-strap):
 
@@ -50,11 +48,6 @@ Some custom components and directives are also added for MarkBind's use.
 - Tabset.vue
 - Typeahead.vue
 
-### BootstrapVue components included in the bundle
-
-- Popover.vue 
-- Tooltip.vue 
-
 ## Installation
 
 ### Browser globals
diff --git a/packages/vue-components/package.json b/packages/vue-components/package.json
index d36dbd6a9a..2ca6d01ed8 100644
--- a/packages/vue-components/package.json
+++ b/packages/vue-components/package.json
@@ -38,6 +38,7 @@
     "bootstrap-vue": "^2.16.0",
     "css-loader": "^3.6.0",
     "eslint-plugin-vue": "^7.9.0",
+    "floating-vue": "^1.0.0-beta.14",
     "jest": "^27.5.1",
     "jest-serializer-vue": "^2.0.2",
     "portal-vue": "^2.1.7",
diff --git a/packages/vue-components/src/Popover.vue b/packages/vue-components/src/Popover.vue
index 370548280f..09abe9660c 100644
--- a/packages/vue-components/src/Popover.vue
+++ b/packages/vue-components/src/Popover.vue
@@ -4,43 +4,50 @@
     data-mb-component-type="popover"
     tabindex="0"
   >
-    <portal v-if="targetEl.id" :to="'header:' + targetEl.id">
-      <slot name="header"></slot>
-    </portal>
-    <portal v-if="targetEl.id" :to="'content:' + targetEl.id">
-      <div class="popover-content">
+    <portal v-if="targetEl.id" :to="'popover:' + targetEl.id">
+      <h3 v-if="hasHeader" class="popover-header">
+        <slot name="header"></slot>
+      </h3>
+      <div class="popover-body">
         <slot name="content"></slot>
       </div>
     </portal>
 
-    <b-popover
+    <v-popover
       v-if="isMounted"
-      :target="targetEl"
-      :triggers="trigger"
+      :triggers="triggers"
+      :popper-triggers="triggers"
       :placement="placement"
+      :delay="0"
+      popper-class="v-popper__popper--skip-transition"
+      shift-cross-axis
     >
-      <template #title>
-        <slot name="header"></slot>
+      <!-- floating-vue triggers must be elements that receive mouse events, hence an empty @click -->
+      <span @click.stop>
+        <slot></slot>
+      </span>
+      <template #popper>
+        <div class="popover-container">
+          <h3 v-if="hasHeader" class="popover-header">
+            <slot name="header"></slot>
+          </h3>
+          <div class="popover-body">
+            <slot name="content"></slot>
+          </div>
+        </div>
       </template>
-      <div class="popover-content">
-        <slot name="content"></slot>
-      </div>
-    </b-popover>
-    <slot></slot>
+    </v-popover>
   </span>
 </template>
 
 <script>
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Portal } from 'portal-vue';
-import { BPopover } from 'bootstrap-vue';
-/* eslint-enable import/no-extraneous-dependencies */
 
 export default {
   name: 'Popover',
   components: {
     Portal,
-    BPopover,
   },
   props: {
     trigger: {
@@ -58,6 +65,14 @@ export default {
       isMounted: false,
     };
   },
+  computed: {
+    triggers() {
+      return this.trigger.split(' ');
+    },
+    hasHeader() {
+      return !!this.$slots.header;
+    },
+  },
   mounted() {
     this.targetEl = this.$el;
     this.isMounted = true;
@@ -65,9 +80,18 @@ export default {
 };
 </script>
 
-<style scoped>
-    .popover-content {
+<style>
+    .popover-container {
         overflow: auto;
         max-height: 50vh;
+        max-width: 276px;  /* following bootstrap */
+    }
+
+    .popover-body {
+        font-size: 0.875rem;  /* following bootstrap */
+    }
+
+    .v-popper {
+        display: inline;
     }
 </style>
diff --git a/packages/vue-components/src/Tooltip.vue b/packages/vue-components/src/Tooltip.vue
index f64b82510f..86e320ad0e 100644
--- a/packages/vue-components/src/Tooltip.vue
+++ b/packages/vue-components/src/Tooltip.vue
@@ -4,33 +4,36 @@
     data-mb-component-type="tooltip"
     tabindex="0"
   >
-    <portal v-if="targetEl.id" :to="targetEl.id">
+    <portal v-if="targetEl.id" :to="'tooltip:' + targetEl.id">
       <slot name="content"></slot>
     </portal>
 
-    <b-tooltip
+    <v-tooltip
       v-if="isMounted"
-      :target="targetEl"
-      :triggers="trigger"
+      :triggers="triggers"
+      :popper-triggers="triggers"
+      :hide-triggers="triggers"
       :placement="placement"
+      :delay="0"
+      popper-class="v-popper__popper--skip-transition"
+      shift-cross-axis
     >
-      <slot name="content"></slot>
-    </b-tooltip>
-    <slot></slot>
+      <template #popper>
+        <slot name="content"></slot>
+      </template>
+      <slot></slot>
+    </v-tooltip>
   </span>
 </template>
 
 <script>
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Portal } from 'portal-vue';
-import { BTooltip } from 'bootstrap-vue';
-/* eslint-enable import/no-extraneous-dependencies */
 
 export default {
   name: 'Tooltip',
   components: {
     Portal,
-    BTooltip,
   },
   props: {
     trigger: {
@@ -48,9 +51,25 @@ export default {
       isMounted: false,
     };
   },
+  computed: {
+    triggers() {
+      return this.trigger.split(' ');
+    },
+  },
   mounted() {
     this.targetEl = this.$el;
     this.isMounted = true;
   },
 };
 </script>
+
+<style>
+    .v-popper--theme-tooltip .v-popper__inner {
+        /* following bootstrap */
+        background: rgba(0, 0, 0, 0.9);
+        padding: 4px 8px;
+        font-size: 0.875rem;
+        max-width: 200px;
+        text-align: center;
+    }
+</style>
diff --git a/packages/vue-components/src/Trigger.vue b/packages/vue-components/src/Trigger.vue
index 91888c0530..e80ebd5d63 100644
--- a/packages/vue-components/src/Trigger.vue
+++ b/packages/vue-components/src/Trigger.vue
@@ -5,34 +5,51 @@
     @[triggerEventType].stop="toggle()"
   >
 
-    <b-popover
+    <v-popover
       v-if="popoverOrTooltipType === 'popover'"
-      :target="$el"
-      :triggers="trigger === 'click' ? 'click blur' : trigger"
+      :triggers="triggers"
+      :popper-triggers="triggers"
       :placement="placement"
+      :delay="0"
+      popper-class="v-popper__popper--skip-transition"
+      shift-cross-axis
     >
-      <template v-if="hasHeader" #title>
-        <portal-target :name="'header:' + target" />
+      <span @click.stop>
+        <slot></slot>
+      </span>
+      <template #popper>
+        <div class="popover-container">
+          <portal-target :name="'popover:' + target" />
+        </div>
       </template>
-      <portal-target :name="'content:' + target" />
-    </b-popover>
+    </v-popover>
 
-    <b-tooltip
+    <v-tooltip
       v-else-if="popoverOrTooltipType === 'tooltip'"
-      :target="$el"
       :placement="placement"
-      :triggers="trigger"
+      :triggers="triggers"
+      :popper-triggers="triggers"
+      :delay="0"
+      popper-class="v-popper__popper--skip-transition"
+      shift-cross-axis
     >
-      <portal-target :name="target" />
-    </b-tooltip>
+      <span @click.stop>
+        <slot></slot>
+      </span>
+      <template #popper>
+        <portal-target :name="'tooltip:' + target" />
+      </template>
+    </v-tooltip>
 
-    <slot></slot>
+    <span v-else>
+      <slot></slot>
+    </span>
   </span>
 </template>
 
 <script>
 /* eslint-disable import/no-extraneous-dependencies */
-import { PortalTarget, Wormhole } from 'portal-vue';
+import { PortalTarget } from 'portal-vue';
 import { $vfm } from 'vue-final-modal';
 /* eslint-enable import/no-extraneous-dependencies */
 
@@ -52,7 +69,7 @@ export default {
     },
     placement: {
       type: String,
-      default: 'auto',
+      default: 'top',
     },
   },
   data() {
@@ -77,12 +94,12 @@ export default {
       }
       return 'mouseenter';
     },
+    triggers() {
+      return this.trigger.split(' ');
+    },
     target() {
       return this.for;
     },
-    hasHeader() {
-      return Wormhole.hasContentFor(`header:${this.target}`);
-    },
   },
   mounted() {
     if (!this.for) {
diff --git a/packages/vue-components/src/__tests__/Popover.spec.js b/packages/vue-components/src/__tests__/Popover.spec.js
new file mode 100644
index 0000000000..84326b9056
--- /dev/null
+++ b/packages/vue-components/src/__tests__/Popover.spec.js
@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import Popover from '../Popover.vue';
+
+const DEFAULT_POPOVER_TRIGGER = 'click to show popover';
+const DEFAULT_POPOVER_HEADER_ATTRIBUTE = 'test popover header attribute';
+const DEFAULT_POPOVER_HEADER_SLOT = 'test popover header slot';
+const DEFAULT_POPOVER_CONTENT_ATTRIBUTE = 'Popover content slot: Lorem ipsum dolor sit amet, '
++ 'consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+const DEFAULT_POPOVER_CONTENT_SLOT = 'Popover content slot: Lorem ipsum dolor sit amet, '
++ 'consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+
+describe('Popover', () => {
+  test('should not be shown until triggered', async () => {
+    const wrapper = mount(Popover, {
+      propsData: {
+        trigger: 'click',
+        content: DEFAULT_POPOVER_CONTENT_ATTRIBUTE,
+      },
+      slots: {
+        default: DEFAULT_POPOVER_TRIGGER,
+      },
+      stubs: ['v-popover'],
+    });
+
+    // don't click on trigger
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('should not show header when no header is given', async () => {
+    const wrapper = mount(Popover, {
+      propsData: {
+        trigger: 'click',
+        content: DEFAULT_POPOVER_CONTENT_ATTRIBUTE,
+      },
+      slots: {
+        default: DEFAULT_POPOVER_TRIGGER,
+      },
+      stubs: ['v-popover'],
+    });
+
+    // click on trigger
+    await wrapper.find('span.trigger-click').trigger('click');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('should show header and content', async () => {
+    const wrapper = mount(Popover, {
+      propsData: {
+        trigger: 'click',
+        content: DEFAULT_POPOVER_CONTENT_ATTRIBUTE,
+        header: DEFAULT_POPOVER_HEADER_ATTRIBUTE,
+      },
+      slots: {
+        default: DEFAULT_POPOVER_TRIGGER,
+      },
+      stubs: ['v-popover'],
+    });
+
+    // click on trigger
+    await wrapper.find('span.trigger-click').trigger('click');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('should show header and content slots correctly', async () => {
+    const wrapper = mount(Popover, {
+      propsData: {
+        trigger: 'click',
+      },
+      slots: {
+        default: DEFAULT_POPOVER_TRIGGER,
+        header: DEFAULT_POPOVER_HEADER_SLOT,
+        content: DEFAULT_POPOVER_CONTENT_SLOT,
+      },
+      stubs: ['v-popover'],
+    });
+
+    // click on trigger
+    await wrapper.find('span.trigger-click').trigger('click');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('should respect the placement attribute', async () => {
+    const wrapper = mount(Popover, {
+      propsData: {
+        trigger: 'click',
+        content: DEFAULT_POPOVER_CONTENT_ATTRIBUTE,
+        header: DEFAULT_POPOVER_HEADER_ATTRIBUTE,
+        placement: 'right',
+      },
+      slots: {
+        default: DEFAULT_POPOVER_TRIGGER,
+      },
+      stubs: ['v-popover'],
+    });
+
+    // click on trigger
+    await wrapper.find('span.trigger-click').trigger('click');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/packages/vue-components/src/__tests__/Tooltip.spec.js b/packages/vue-components/src/__tests__/Tooltip.spec.js
new file mode 100644
index 0000000000..6d95832242
--- /dev/null
+++ b/packages/vue-components/src/__tests__/Tooltip.spec.js
@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import Tooltip from '../Tooltip.vue';
+
+const DEFAULT_TOOLTIP_TRIGGER = 'click to show tooltip';
+const DEFAULT_TOOLTIP_CONTENT = 'Lorem ipsum dolor sit amet';
+
+describe('Tooltip', () => {
+  test('should not be shown until triggered', async () => {
+    const wrapper = mount(Tooltip, {
+      propsData: {
+        trigger: 'click',
+        content: DEFAULT_TOOLTIP_CONTENT,
+      },
+      slots: {
+        default: DEFAULT_TOOLTIP_TRIGGER,
+      },
+      stubs: ['v-tooltip'],
+    });
+
+    // don't click on trigger
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('should show contents correctly when triggered', async () => {
+    const wrapper = mount(Tooltip, {
+      propsData: {
+        trigger: 'click',
+        content: DEFAULT_TOOLTIP_CONTENT,
+      },
+      slots: {
+        default: DEFAULT_TOOLTIP_TRIGGER,
+      },
+      stubs: ['v-tooltip'],
+    });
+
+    // click on trigger
+    await wrapper.find('span.trigger-click').trigger('click');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('should respect the placement attribute', async () => {
+    const wrapper = mount(Tooltip, {
+      propsData: {
+        trigger: 'click',
+        content: DEFAULT_TOOLTIP_CONTENT,
+        placement: 'right',
+      },
+      slots: {
+        default: DEFAULT_TOOLTIP_TRIGGER,
+      },
+      stubs: ['v-tooltip'],
+    });
+
+    // click on trigger
+    await wrapper.find('span.trigger-click').trigger('click');
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Popover.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Popover.spec.js.snap
new file mode 100644
index 0000000000..54d6c5cfcf
--- /dev/null
+++ b/packages/vue-components/src/__tests__/__snapshots__/Popover.spec.js.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover should not be shown until triggered 1`] = `
+<span
+  class="trigger-click"
+  content="Popover content slot: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  data-mb-component-type="popover"
+  tabindex="0"
+>
+  <!---->
+   
+  <!---->
+</span>
+`;
+
+exports[`Popover should not show header when no header is given 1`] = `
+<span
+  class="trigger-click"
+  content="Popover content slot: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  data-mb-component-type="popover"
+  tabindex="0"
+>
+  <!---->
+   
+  <v-popover-stub
+    delay="0"
+    placement="top"
+    popper-class="v-popper__popper--skip-transition"
+    popper-triggers="click"
+    shift-cross-axis=""
+    triggers="click"
+  >
+    <span>
+      click to show popover
+    </span>
+  </v-popover-stub>
+</span>
+`;
+
+exports[`Popover should respect the placement attribute 1`] = `
+<span
+  class="trigger-click"
+  content="Popover content slot: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  data-mb-component-type="popover"
+  header="test popover header attribute"
+  tabindex="0"
+>
+  <!---->
+   
+  <v-popover-stub
+    delay="0"
+    placement="right"
+    popper-class="v-popper__popper--skip-transition"
+    popper-triggers="click"
+    shift-cross-axis=""
+    triggers="click"
+  >
+    <span>
+      click to show popover
+    </span>
+  </v-popover-stub>
+</span>
+`;
+
+exports[`Popover should show header and content 1`] = `
+<span
+  class="trigger-click"
+  content="Popover content slot: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  data-mb-component-type="popover"
+  header="test popover header attribute"
+  tabindex="0"
+>
+  <!---->
+   
+  <v-popover-stub
+    delay="0"
+    placement="top"
+    popper-class="v-popper__popper--skip-transition"
+    popper-triggers="click"
+    shift-cross-axis=""
+    triggers="click"
+  >
+    <span>
+      click to show popover
+    </span>
+  </v-popover-stub>
+</span>
+`;
+
+exports[`Popover should show header and content slots correctly 1`] = `
+<span
+  class="trigger-click"
+  data-mb-component-type="popover"
+  tabindex="0"
+>
+  <!---->
+   
+  <v-popover-stub
+    delay="0"
+    placement="top"
+    popper-class="v-popper__popper--skip-transition"
+    popper-triggers="click"
+    shift-cross-axis=""
+    triggers="click"
+  >
+    <span>
+      click to show popover
+    </span>
+  </v-popover-stub>
+</span>
+`;
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Tooltip.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Tooltip.spec.js.snap
new file mode 100644
index 0000000000..015a97fab7
--- /dev/null
+++ b/packages/vue-components/src/__tests__/__snapshots__/Tooltip.spec.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip should not be shown until triggered 1`] = `
+<span
+  class="trigger-click"
+  content="Lorem ipsum dolor sit amet"
+  data-mb-component-type="tooltip"
+  tabindex="0"
+>
+  <!---->
+   
+  <!---->
+</span>
+`;
+
+exports[`Tooltip should respect the placement attribute 1`] = `
+<span
+  class="trigger-click"
+  content="Lorem ipsum dolor sit amet"
+  data-mb-component-type="tooltip"
+  tabindex="0"
+>
+  <!---->
+   
+  <v-tooltip-stub
+    delay="0"
+    hide-triggers="click"
+    placement="right"
+    popper-class="v-popper__popper--skip-transition"
+    popper-triggers="click"
+    shift-cross-axis=""
+    triggers="click"
+  >
+     click to show tooltip
+  </v-tooltip-stub>
+</span>
+`;
+
+exports[`Tooltip should show contents correctly when triggered 1`] = `
+<span
+  class="trigger-click"
+  content="Lorem ipsum dolor sit amet"
+  data-mb-component-type="tooltip"
+  tabindex="0"
+>
+  <!---->
+   
+  <v-tooltip-stub
+    delay="0"
+    hide-triggers="click"
+    placement="top"
+    popper-class="v-popper__popper--skip-transition"
+    popper-triggers="click"
+    shift-cross-axis=""
+    triggers="click"
+  >
+     click to show tooltip
+  </v-tooltip-stub>
+</span>
+`;
diff --git a/packages/vue-components/src/index.js b/packages/vue-components/src/index.js
index dd859624d2..1c084852de 100644
--- a/packages/vue-components/src/index.js
+++ b/packages/vue-components/src/index.js
@@ -1,9 +1,6 @@
-// Components and directives from bootstrap-vue
 /* eslint-disable import/no-extraneous-dependencies */
-import {
-  BPopover,
-  BTooltip,
-} from 'bootstrap-vue';
+import { Dropdown, Tooltip } from 'floating-vue';
+import 'floating-vue/dist/style.css';
 /* eslint-enable import/no-extraneous-dependencies */
 
 // Custom / modified components and components from yuche/vue-strap
@@ -59,8 +56,8 @@ const components = {
   popover,
   tooltip,
   modal,
-  BPopover,
-  BTooltip,
+  'VPopover': Dropdown,
+  'VTooltip': Tooltip,
 };
 
 const directives = {