Set tooltip on a plottablejs linegraph from Angular directive

Question

I got a angular directive that displays a plottable line graph. But I need to set tooltips whit the value when the cursor hovers the line im plotting.

I got something like this:

var plot = new Plottable.Plots.Line()
   .addDataset(ds)
   .x(project_x, xScale)
   .y(project_y, yScale)
   .attr('stroke', function(d) { return label; }, colorScale);

and renders with

var svgElem = elem.find('svg')[0];
plot.renderTo(svgElem);

That works greate :) and then I tries to add some tooltips from this example: http://jsfiddle.net/gv1xsnkr/

// Initializing tooltip anchor
var tooltipAnchorSelection = plot.foreground().append("circle").attr({
  r: 3,
  opacity: 0
});

In the example they are using jquery, I dont want to import jquery just for this

var tooltipAnchor = $(tooltipAnchorSelection.node());
tooltipAnchor.tooltip({
  animation: false,
  container: "body",
  placement: "auto",
  title: "text",
  trigger: "manual"
});

So I tries to do it like this

var tooltipAnchor = document.querySelectorAll(tooltipAnchorSelection.node().nodeName);

But I get an error on

tooltipAnchor.tooltip({ ... });

angular.js:14516 TypeError: tooltipAnchor.tooltip is not a function

Anyone got a clue hot to do this?

I have the same Problem; the issue is that tooltip is not a function of jQuery, but of bootstrap - so you have to Import both. I still have Problems, that's why I won't post this as an answer, but my Problems now are because of typescript; the tooltip-function is now correctoly resolved to the bootstrap.js-file — Yato, May 30 '17 at 14:20

score 0 · Answer 1 · answered Nov 15 '17 at 18:23

I had this problem using Vue.js, not Angular, but the problem sounds very similar. It was a problem of importing the libraries in the correct order:

First jquery (required by bootstrap)
Then bootstrap

How are you packaging your app?

I used gulp, so the sequence that worked for me was to put the jquery script tag in index.html and bootstrap = require('bootstrap') in the vue component (you'd put it in the directive). Requiring in bootstrap should be all that's necessary - that will give you access to the tooltip function.

Set tooltip on a plottablejs linegraph from Angular directive

1 Answers1