How to center the Bootstrap Tooltip on an SVG?

Question

I want to shift the tooltip a few pixels to the right, so the arrow is in the center of the cell where the cursor is (currently, it's positioned at (0,0), that is, top left). This is my code:

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

and an image:

Ideally I'd like to do this using javascript, so I can update the number of pixels if I change the size of the cells.

Answer 1

Here's a simple extension of nachocab's getPosition implementation that supports both regular HTML elements and SVG elements:

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