Вопрос по svg, twitter-bootstrap – Как центрировать всплывающую подсказку Bootstrap на SVG?

11

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

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

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

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

Можете ли вы опубликовать HTML? Поведение по умолчанию - центрирование всплывающей подсказки, поэтому мне интересно, не является ли выбранная вами ячейка 0px или что-то странное в этом роде. eterps

Ваш Ответ

3   ответа
1

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

https: //gist.github.com/288661

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

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

Спасибо за сове nachocab
3

которое поддерживает как обычные элементы 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
  })
}

Похожие вопросы