將引導工具提示綁定到使用d3動態創建的SVG元素

我想用d3動態創建一個SVG元素並將Bootstrap工具提示綁定到它。將引導工具提示綁定到使用d3動態創建的SVG元素

在非動態HTML腳本這些工具提示結合是這樣的：

$('[rel=tooltip]').tooltip

兩個問題在SVG動態做時，它克服：

1）HTML的div包含在SVG別噸渲染

的解決方案是使用container屬性在選項（1，2），其works great：

$('[rel=tooltip]'').tooltip({ 
    container:'body' 
});

2）元素不會在瞬間存在頁面加載

的advice here是使用selector屬性導致的工具提示對象委託給指定的目標。這工作：

$('body').tooltip({ 
    selector: '[rel=tooltip]' 
});

的問題出現了，當我嘗試這兩種方法結合起來（見fiddle）：

$('body').tooltip({ 
    container: 'body', 
    selector: '[rel=tooltip]' 
});

這似乎忽視了容器屬性，並附加了SVG的身體內的提示不顯示的地方。這個例子的另一個問題是屬性的順序很重要 - 如果它們顛倒了，它根本不起作用。

問題是如何在同一時間解決這兩個問題？

一種可能更乾淨並給予更多控制的方法是直接在d3中將函數附加到創建元素或發生鼠標事件時。我想：

.on('mouseenter', $(@).tooltip({container: 'body'}));

這給了TypeError: listener.apply is not a function

你能幫忙嗎？

2013-09-26 Derek Hill

你嘗試過將這些屬性之一，其他的，而不是所有在後一旦？ –

謝謝@LarsKotthoff。我不得不承認我不確定你的意思。（每次運行'$（'body'）。tooltip'每次有一個屬性[不工作]（http://jsfiddle.net/derekhill/DkgaX/），但我想這是可以預料的，因爲第二個會覆蓋第一個） –

你在'$（）'中有兩個不同的選擇器。特別是'$'（'body'）上的'container：'body''可能會混淆它。我會建議'$（'body'）。tooltip（{selector：'[rel = tooltip]'}）;'然後'$（'[rel = tooltip]'）。）;'。 –

如果您運行的兩段代碼分別代替在一起，即代替

$('body').tooltip({ 
    container: 'body', 
    selector: '[rel=tooltip]' 
});

運行它的工作原理

$('body').tooltip({ 
    selector: '[rel=tooltip]' 
}); 
$('[rel=tooltip]').tooltip({ 
    container: 'body' 
});

2013-09-26 09:38:10

回答