¿Cómo centrar Bootstrap Tooltip en un SVG?

Question

Quiero desplazar la información sobre herramientas unos píxeles a la derecha, por lo que la flecha está en el centro de la celda donde está el cursor (actualmente, está posicionado en (0,0), es decir, arriba a la izquierda). Este es mi código:

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

y una imagen:

Idealmente me gustaría hacer esto usando javascript, por lo que puede actualizar el número de píxeles si cambio el tamaño de las células.

Answer 1

He aquí una simple extensión de la aplicación getPosition de nachocab que soporta tanto los elementos HTML regulares y elementos 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 
    }) 
} 

Answer 2

Parece ser un error en Firefox/Chrome para elementos SVG (como es mi caso) https://bugzilla.mozilla.org/show_bug.cgi?id=649285

por lo que acaba de cambiar el sistema de arranque-tooltip.js de esto:

getPosition: function (inside) { 
    return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { 
    width: this.$element[0].offsetWidth 
    , height: this.$element[0].offsetHeight 
    }) 
} 

a este :

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

Answer 3

he encontrado que el posicionamiento era poco firme en Chrome (altura adecuada, pero colocado en el extremo izquierdo de la svg: elemento rect) y Firefox (altura adecuada, la posición x totalmente incorrecto) Yo había estado usando el plugin para jQuery svgdom (seguro si eso se libraron mis resultados en absoluto), pero aquí está la solución que se me ocurrió:

https://gist.github.com/2886616

Es un diff contra un boostrap.js combinados . Aquí está el problema latente desde hace tiempo que otra persona presentada en contra de arranque:

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