JSFiddle - React, Tailwind, and code Playground

HTML

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <div class="my-4 text-center">
    <strong>This is a regular Vue component:</strong>
    <regular-tooltip msg="_regular"></regular-tooltip>
  </div>

  <div class="my-4 text-center">
    <strong>This is a Vue Web Component:</strong>
    <web-component-tooltip msg="_webcomponent"></web-component-tooltip>
  </div>
</div>

Vue

import wrap from 'https://cdn.jsdelivr.net/npm/@vue/web-component-wrapper@1.2.0/dist/vue-wc-wrapper.min.js'

const TooltipTest = {
  name: "tooltip-test",
  template: `
      <div class="align-items-center">
      <div :id="'hoverTarget_' + suffix">Hover Me</div>
      <b-tooltip triggers="hover" :target="'hoverTarget_' + suffix">
      This is the tooltip popup
      </b-tooltip>
    </div>`,
  props: [
  	'suffix'
  ]
}

// Define Vue component
Vue.component('RegularTooltip', TooltipTest);

// Define web component
const CustomElement = wrap(Vue, TooltipTest)
window.customElements.define('web-component-tooltip', CustomElement)

new Vue({ el: "#app" })