如何在SVG上居中Bootstrap工具提示？

Question

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

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

还有一张图片：

最好使用JavaScript来实现此操作，这样如果更改单元格大小，就可以更新像素数。

- nachocab

---

你能发布一些HTML吗？默认行为是居中提示框，所以我想知道你选择的单元格是否不是0像素或其他奇怪的值。 - eterps

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
  })
}

- Lars Grammel

Answer 2

看起来这是Firefox / Chrome在SVG元素中的一个错误（就像我的情况一样）https://bugzilla.mozilla.org/show_bug.cgi?id=649285

所以我只是将bootstrap-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
  })
}

- nachocab

Answer 3

我发现在Chrome中定位有些问题（高度正确，但是位置在svg:rect元素的最左边），而在Firefox中则完全不正确（高度正确，但x位置错误）。我一直在使用jQuery的svgdom插件（不确定是否影响了我的结果），但这是我想出的解决方案：

https://gist.github.com/2886616

这是针对合并的boostrap.js的差异。以下是有人针对bootstrap提出的长期悬而未决的问题：

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

- blarf