Dynamic v-tooltip

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<html>

  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>

  <body>
    <div id="app">
      <v-app>
        <p>
          other components
        </p>
        <p>
          other components
        </p>
        <p>
          other components
        </p>
        <div id="selectedEl">
          <p>
            This is selected element that needs to get v-tooltip
          </p>
        </div>
        <p>
          other components
        </p>
        <p>
          <span v-if="added">Tooltip added. Try hovering over selectedEl</span>
          <v-btn color="primary" small @click="add" v-else>Add Tooltip dynamically</v-btn>
        </p>
      </v-app>
    </div>
  </body>

</html>

CSS

#selectedEl {
  color: red
}

JavaScript

var vm = new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  methods: {
    add() {
      const el = document.getElementById("selectedEl");
      const Tooltip = {
        props: ["html"],
        template: `
          <v-tooltip>
            <template v-slot:activator="{ on, attrs }">
              <span v-html='html' v-bind="attrs" v-on="on"></span>
            </template>
            <span>Tooltip</span>
          </v-tooltip>
        `,
      };
      const TooltipCtor = Vue.extend(Tooltip);
      new TooltipCtor({
        vuetify: new Vuetify(),
        propsData: {
          html: el.outerHTML,
        },
      }).$mount(el);
      this.added = true;
    }
  },
  data: {
  	added: false
  }
});