如何将Bootstrap Tooltip集中在SVG上?

nac*_*cab 11 svg tooltip twitter-bootstrap

我想将工具提示向右移动几个像素,因此箭头位于光标所在单元格的中心(当前,它位于(0,0),即左上角).这是我的代码:

 $("rect.cell").tooltip({
    title: "hola",
    placement: "top"
  });
Run Code Online (Sandbox Code Playgroud)

和图像: 在此输入图像描述

理想情况下我想使用javascript来做这件事,所以如果我改变单元格的大小,我可以更新像素数.

Lar*_*mel 3

下面是 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
  })
}
Run Code Online (Sandbox Code Playgroud)