如何使用 SVG 对象显示引导工具提示? [英] How do I show a bootstrap tooltip with an SVG object?

问题描述

我很想知道为什么我可以在常规 HTML 元素上显示工具提示，但不能在 D3 生成的 SVG 上显示:http://jsfiddle.net/nachocab/eQmYX/5/

我做错了什么?

$(document).ready(function () {$("a").工具提示({'位置':'底部'});//这有效$("my_circle").tooltip({'位置':'底部'});//这不起作用});

解决方案

问题是 Bootstrap v2.2.2 生成的工具提示是一个

被插入到 中><svg>，这使得浏览器不渲染它.

我最终使用了 Bootstrap Tooltip 的最新开发版本，它添加了一个新参数来确定工具提示的容器.现在我可以这样做:

$(".my_circle").tooltip({'容器':'身体'，'位置':'底部'});//这有效！

编辑 - 一年后

为了记录，我放弃了 jQuery 要求，我现在正在使用优秀的 d3-tip 贾斯汀·帕尔默 (Justin Palmer).

I'm going crazy trying to understand why I can show tooltips on regular HTML elements, but not on D3-generated SVGs: http://jsfiddle.net/nachocab/eQmYX/5/

What am I doing wrong?

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

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

解决方案

The problem was that the tooltip that Bootstrap v2.2.2 generates is a <div> that was getting inserted inside the <svg>, which made the browser not render it.

I ended up using the latest development version of Bootstrap Tooltip, which adds a new parameter to determine the container of the tooltip. Now I can do:

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

EDIT - One year later

For the record, I dropped the jQuery requirement and I'm now using the excellent d3-tip by Justin Palmer.

这篇关于如何使用 SVG 对象显示引导工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！