5

I'm using several external libraries to build charts with tooltips within a vue app. I'm using single-file components

I've got a working fiddle, but haven't been able to translate it into a working component.

Methods attempted:

  1. Load the 3 tooltip-realted scripts in the <head> tag

    • "TypeError: tooltipAnchor.tooltip is not a function"

  2. Load the 3 tooltip-realted scripts in the <body> tag, before tag for compiled vue code (build.js)

    • "TypeError: tooltipAnchor.tooltip is not a function"

  3. Load the 3 tooltip-realted scripts in the Chart.vue component in the mounted hook

    • "TypeError: tooltipAnchor.tooltip is not a function"

Chart.vue:

mounted: function mounted() {
  this.loadJS('https://code.jquery.com/jquery-3.2.1.slim.min.js')
  .then(() => {
    console.log('jquery loaded');
    return this.loadJS('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js');
  })
  .then(() => {
    console.log('popper loaded');
    return this.loadJS('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js')
  })
  .then(() => {
    console.log('bootstrap loaded');
    this.buildChart();
  });
},
methods: {
  loadJS: function loadJS(url) {
    return this.$http.get(url);
  }
  ...
}

  1. Require all three scripts at the top of Chart.vue:

    • Bootstrap cannot load because jQuery isn't a global variable available to it

I suspect something is wrong with the order scripts are loading when I put them in index.html, but I cannot tell what. Does anyone know how jsfiddle compiles its html? What else am I missing?

ebbishop
  • 1,833
  • 2
  • 20
  • 45
  • Have you tried to use `vue-strap`?, it's a Boostrap built in components for Vuejs, it does not need to install jQuery http://yuche.github.io/vue-strap/ – ricardoorellana Oct 17 '17 at 20:57
  • Because of the other libraries I'm using, I'm not sure how `vue-strap` would work. The tooltip anchor needs to be appended to an svg. – ebbishop Oct 17 '17 at 21:00

2 Answers2

6

Finally found the solution:

Include jquery in index.html:

<body>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <div id="app"></div>
  <!-- inject:js -->
  <script src="/js/build.js"></script>
  <!-- endinject -->
</body>

and import/require bootstrap in the vue component Chart.vue:

<template>
    <div id="chart"></div>
</template>
<script type="text/javascript">
  var d3 = require('d3');
  var Plottable = require('plottable');
  var bootstrap = require('bootstrap');

...

The method that creates & updates tooltips now works as expected.

ebbishop
  • 1,833
  • 2
  • 20
  • 45
0

It seems that you're making the ajax requests to these JS files however you're not doing anything with the response? A better way to do this would be

  1. download the files locally
  2. put them in the same directory as your single file component
  3. import the local files right above your component

```

<script>
  // assuming you're using a transpiler? use appropriate syntax here
  import './popper.min'
  import './bootstrap.min';

  var vm = new Vue({
  el: '#app',
  data: {
    data_2017: [{
    x: '6th Grade',
    y: 12
  }, // ...

```

xaksis
  • 448
  • 5
  • 14
  • I've also tried this - see #4 in my question. I'm trying to put together a single-file component, so the syntax is slightly different, but just requiring/importing the correct libraries doesn't work. And it's not clear from documentation how else I should instantiate bootstrap tooltips – ebbishop Oct 18 '17 at 13:06