如何使用SVG對象顯示引導工具提示？

我瘋了，試圖瞭解爲什麼我可以在常規HTML元素上顯示工具提示，但不在D3生成的SVG上：http://jsfiddle.net/nachocab/eQmYX/5/如何使用SVG對象顯示引導工具提示？

我在做什麼錯了？

$(document).ready(function() { 
    $("a").tooltip({ 
     'placement': 'bottom' 
    }); // this works 

    $("my_circle").tooltip({ 
     'placement': 'bottom' 
    }); // this does not work 
});

來源

2013-02-04 nachocab

jQuery對SVG玩不好。試試https://github.com/shawnbot/d3-bootstrap – Duopixel

還沒有看過d3-bootstrap項目呢......如果可能的話，你可能不得不使用svg的。 http://jsfiddle.net/BCsGc/1/ – mg1075

@nachocab - 也許我完全錯過了一些東西，但是......你接受了lephix的答案。你有一個這樣的工作示例，引導工具提示正在生成和可見？首先，lephix有「d3.tooltip（）」，但我認爲這是錯誤的：它需要「bootstrap.tooltip（）」。下面是你的小提琴的一個分支：http://jsfiddle.net/7bNgC/11/當然，工具提示正在生成，但它仍然不可見。 – mg1075

的問題是，該引導程序V2.2.2生成工具提示是漸漸插入<svg>，這使得瀏覽器不使其內部的<div>。

我結束了使用Bootstrap Tooltip的最新開發版本，該版本添加了一個新參數來確定工具提示的容器。現在，我可以這樣做：

$(".my_circle").tooltip({ 
    'container': 'body', 
    'placement': 'bottom' 
}); // this works!

編輯 - 一年後

爲了記錄在案，我放棄了jQuery的要求，我現在正在使用由賈斯汀·帕爾默的優秀d3-tip。

來源

2013-02-06 18:34:23 nachocab

顯然帶有圓點的$（「。my_circle」）''。 – krawyoti

我在這裏做錯了什麼。它似乎沒有工作。 http://jsfiddle.net/selvaG/eQmYX/39/ – selvagsz

我已經更新了你的jsfiddle - 你可以通過使用$（'svg circle'）附加到所有的svg circle元素，tooltip ... http：// jsfiddle。 net/eQmYX/41/ –

使用d3-bootstrap庫。此庫將爲您提供與D3.js兼容的警報，彈出窗口和工具提示功能您可以將以下代碼添加到您的jsFiddle。

將此添加到您的頭部。

<script src="https://github.com/shawnbot/d3-bootstrap/blob/master/d3-bootstrap.js"/>

將此信息添加到您的代碼部分。

d3.selectAll(".my_circle") 
    .call(d3.tooltip().placement("right"));

來源

2013-02-05 06:05:31 lephix

它似乎不工作，請參閱mg1075的評論jsfiddle.net/7bNgC/11 – nachocab

無法在SVG元素上工作 – superphonic

如何使用SVG對象顯示引導工具提示？

回答

相關問題