public

Fix popover positioning on SVG elements

  • Download Gist
bootstrap_svg_fix.diff
Diff
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
diff --git a/vendor/assets/javascripts/twitter/bootstrap.js b/vendor/assets/javascripts/twitter/bootstrap.js
index 6479673..9497ed4 100644
--- a/vendor/assets/javascripts/twitter/bootstrap.js
+++ b/vendor/assets/javascripts/twitter/bootstrap.js
@@ -961,6 +961,14 @@
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
+ if ((typeof(pos.height) == 'undefined') || (pos.height == 0)) {
+ pos.height = this.$element.attr('height')
+ }
+
+ if ((typeof(pos.width) == 'undefined') || (pos.width == 0)) {
+ pos.width = this.$element.attr('width');
+ }
+
switch (inside ? placement.split(' ')[1] : placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}

Didn't work for me. http://stackoverflow.com/questions/10727892/how-to-center-the-bootstrap-tooltip-on-an-svg was helpful:

    if ((typeof(pos.height) == 'undefined') || (pos.height == 0)) {
      pos.height = this.$element[0].getBBox().width
    }
    if ((typeof(pos.width) == 'undefined') || (pos.width == 0)) {
      pos.width = this.$element[0].getBBox().height
    }

How didn't it work for you?

The gist works for me with the following caveats:

  • I'm using the svgdom jquery plugin
  • I'm specifying the x and y attributes on the SVG element explicitly

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.