如何将SVG上的Bootstrap Tooltip居中？

Question

我想将工具提示向右移几个像素，所以箭头位于光标所在单元的中心（当前位于（0,0），即左上角）。这是我的代码：

$("rect.cell").tooltip({ 
    title: "hola", 
    placement: "top" 
    }); 

和图像：

理想情况下，我想做到这一点使用JavaScript，所以如果我改变细胞的大小，我可以更新的像素数。

Answer 1

这里的nachocab的为getPosition实现的简单扩展，同时支持普通的HTML元素和SVG元素：

getPosition: function (inside) { 
    var el = this.$element[0] 
    var width, height 

    if ('http://www.w3.org/2000/svg' === el.namespaceURI) { 
     var bbox = el.getBBox() 
     width = bbox.width 
     height = bbox.height 
    } else { 
     width = el.offsetWidth 
     height = el.offsetHeight 
    } 

    return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { 
    'width': width 
    , 'height': height 
    }) 
} 

Answer 2

这似乎是对SVG元素在Firefox/Chrome中的错误（这是我的情况）https://bugzilla.mozilla.org/show_bug.cgi?id=649285

所以我就改从这个引导-tooltip.js：

getPosition: function (inside) { 
    return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { 
    width: this.$element[0].offsetWidth 
    , height: this.$element[0].offsetHeight 
    }) 
} 

本：

getPosition: function (inside) { 
    return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { 
    width: this.$element[0].getBBox().width 
    , height: this.$element[0].getBBox().height 
    }) 
} 

Answer 3

我发现，定位是靠不住的铬（适当的高度，但定位在最左边的SVG的：rect元素）和Firefox（适当的高度，完全不正确的x位置）。我一直使用的jQuery的svgdom插件（不确定，如果抛出了我的成绩在所有），但在这里，我想出了解决方案：

https://gist.github.com/2886616

这对组合boostrap.js一个差异。下面是蛰伏已久的问题，有人对引导其他人提起：

https://github.com/twitter/bootstrap/issues/2703