在Angular指令的plottablejs linegraph上設置工具提示

我得到了一個顯示可繪製直線圖的角度指令。但是當光標懸停在直線直方圖上時，我需要設置工具提示。在Angular指令的plottablejs linegraph上設置工具提示

我得到了這樣的事情：

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

與

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

這一工程馬麗娟:)渲染，然後我試圖從這個例子中添加一些提示： http://jsfiddle.net/gv1xsnkr/

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

在他們正在使用jQuery的例子中，我不wan噸至進口的jQuery只爲這

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

所以我試圖做這樣

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

但我得到一個錯誤的

tooltipAnchor.tooltip({ ... });

angular.js：14516類型錯誤：tooltipAnchor .tooltip不是一個功能

任何人都有一個線索很火這樣做？

來源

2017-05-05 Goran

我有同樣的問題;問題是tooltip不是jQuery的函數，而是bootstrap - 所以你必須導入兩者。我仍然有問題，這就是爲什麼我不會將此作爲答案發布，但現在我的問題是由於打字稿;工具提示功能現在正確解析爲bootstrap.js文件 – Yato

我有這個問題使用Vue.js，而不是Angular，但問題聽起來非常相似。這是導入庫按照正確的順序的問題：

第一的jQuery（通過引導要求）
然後引導

你是如何包裝你的應用程序？

我使用了gulp，所以我的工作序列是將jquery腳本標記放入vue組件中的index.html和bootstrap = require('bootstrap')（您將它放在指令中）。在bootstrap中需要所有必要的 - 這將讓你訪問tooltip函數。

來源

2017-11-15 18:23:37 ebbishop

在Angular指令的plottablejs linegraph上設置工具提示

回答

相關問題