svg - Bootstrap ツールチップを SVG の中央に配置するには?

Question

ツールチップを数ピクセル右に移動したいので、矢印はカーソルがあるセルの中央にあります (現在、(0,0)、つまり左上に配置されています)。これは私のコードです:

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

そして画像：

理想的には、javascript を使用してこれを行いたいので、セルのサイズを変更するとピクセル数を更新できます。

Answer 1

以下は、通常の HTML 要素と SVG 要素の両方をサポートする nachocab の getPosition 実装の単純な拡張です。

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

It appears to be a bug in Firefox/Chrome for SVG elements (as is my case) https://bugzilla.mozilla.org/show_bug.cgi?id=649285

so I just changed the bootstrap-tooltip.js from this:

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

to this:

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

Chrome（適切な高さですが、svg：rect要素の左端に配置されています）とFirefox（適切な高さ、完全に正しくないx位置）では、配置が不安定であることがわかりました。私はjQuery用のsvgdomプラグインを使用していました（それが私の結果をまったく捨てたかどうかはわかりません）が、私が思いついた解決策は次のとおりです。

https://gist.github.com/2886616

これは、boostrap.jsを組み合わせたものとの違いです。これは、他の誰かがブートストラップに対して提出した長い休止状態の問題です。

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