Create a gist now

Instantly share code, notes, and snippets.

Fix popover positioning on SVG elements
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}
@ivoronin
ivoronin commented Jul 1, 2012

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
    }
@inferiorhumanorgans

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment