Как центрировать подсказку Bootstrap на SVG?

Я хочу сдвинуть всплывающую подсказку на несколько пикселей вправо, поэтому стрелка находится в центре ячейки, где находится курсор (в настоящее время он позиционируется в (0,0), то есть вверху слева). Это мой код:

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

и изображение: enter image description here

В идеале я хотел бы сделать это с помощью javascript, поэтому я могу обновить количество пикселей, если я изменил размер ячеек.

Ответы

Ответ 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
  })
}

Ответ 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
  })
}

Ответ 3

Я обнаружил, что позиционирование было неустойчивым в Chrome (правильная высота, но позиционируется в крайнем левом углу элемента svg: rect) и Firefox (правильная высота, абсолютно неправильная позиция x). Я использовал плагин svgdom для jQuery (неуверенный, если это вообще отбросило мои результаты), но вот решение, с которым я столкнулся:

https://gist.github.com/2886616

Это отличие от комбинированного boostrap.js. Здесь длинная спящая проблема, которую кто-то еще подал против бутстрапа:

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