[SOLVED] How to import Bootstrap 4 Tooltip plugin for VueJS single page app?

How to import Bootstrap 4 Tooltip plugin for VueJS single page app?

I am trying to use Bootstrap 4 with a VueJS Single page app but can't figure out how to get the tooltip to work. (Note: I know there is a Bootstrap-vue project but I don't want to use that one...yet)

Here's my simple test:

<template>
  <div>
    <span id='tip'>Test link</span>
  </div>
</template>

<script>
import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/js/dist/popover.js';
import 'bootstrap/js/dist/tooltip.js';

export default {
  name: 'test',
  created: function() {
    $('#tip').tooltip({
      title: 'hello world'
    });
  }
};
</script>

But, that just renders the link and no tooltip.

There is no error in console. So, what am I doing wrong here?

Solution

As I answered in Discord: The solution is to use mounted instead of created so you can access the dom for that kind of method to work (basically).