如何将Bootstrap Tooltip集中在SVG上?

时间:2012-05-23 21:11:02

标签: svg twitter-bootstrap tooltip

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

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

和图片: enter image description here

理想情况下,我想使用javascript进行此操作,因此如果我更改单元格的大小,我可以更新像素数。

3 个答案:

答案 0 :(得分: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
  })
}

答案 1 :(得分: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
  })
}

答案 2 :(得分:1)

我发现Chrome中的定位很糟糕(适当的高度,但位于svg:rect元素的最左侧)和Firefox(适当的高度,完全不正确的x位置)。我一直在使用jv的svgdom插件(不确定是否完全抛弃了我的结果),但这是我提出的解决方案:

https://gist.github.com/2886616

这是针对组合的boostrap.js的差异。这是其他人提出反对引导的长期休眠问题:

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