如何将Bootstrap工具提示放在SVG上? [英] How to center the Bootstrap Tooltip on an SVG?

问题描述

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

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

和图片:

理想情况下，我想使用javascript做到这一点，因此，如果更改单元格的大小，我可以更新像素数.

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.

推荐答案

这是nachocab的getPosition实现的简单扩展，它支持常规HTML元素和SVG元素:

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

这篇关于如何将Bootstrap工具提示放在SVG上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！