English 中文(简体)
如何在 SVG 上将布兹陷阱工具提示居中?
原标题:How to center the Bootstrap Tooltip on an SVG?

我想将工具提示向右移一些像素, 所以箭头位于光标所在的单元格中心( 目前, 它位于 0 0, 即左上方 ) 。 这是我的代码 :

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

and an image: enter image description here

最理想的情况是,我喜欢用刺绣来做这个, 这样我就可以更新像素的数量, 如果我改变细胞大小的话。

最佳回答

支持常规 HTML 元素和 SVG 元素的 Nachocab s get Postation 执行的简单扩展 :

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
  })
}
问题回答

在Firefox/Chrome中, SVG 元素(和我的情况一样)https://buggzilla.mozilla.org/show_bugg.cgi?id=649285

所以我刚换了靴子套具,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
  })
}

我发现Chrome(正确高度,但位于 svg:rect 元素的远左)和Firefox(正确高度,完全不正确的 x 位置)的定位是斜的。 我用 svgdom 插件为 jQuery (不确定该插件是否使我的结果完全消失), 但这里我提出的解决方案是:

https://gist.github.com/2886616

这是针对一个联合的推拉法.js。这里是长期的休眠问题, 其他人对靴子陷阱提出抗议:

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





相关问题
WPF Multiline ToolTip with data binding

In our WPF application we show a data bound GridView, and one of the grid fields is a filter field which is combination of several sub-fields. In the grid, I show a simple string concatenation of the ...

jQuery Hover Problem

I have a HTML structure like this: <ul id="carousel" class="jcarousel-skin-photos"> <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/...

Right to left tooltip text c#

Using WinForms, I have a string which I want to set into a ToolTip. The string is separated by lines with Environment.NewLine, like so: x.ToolTipText = "aaaaaa" + Environment.NewLine + "bbb"; when ...

jQuery Tools Tooltip

I have a link with a background image that uses the jQuery tooltip on a list. There are multiples of these on a page (for example 20). The first one works just fine but the remaining tooltips do not ...

Displaying tooltip over a disabled control

I m trying to display a tooltip when mouse hovers over a disabled control. Since a disabled control does not handle any events, I have to do that in the parent form. I chose to do this by handling the ...

热门标签