Perché il popover di Bootstrap di Twitter non funziona con gli elementi SVG?

Sono più un ragazzo C++, ma al momento sto lavorando su alcuni elementi dell'interfaccia utente web. Non riesco a far apparire un popover Bootstrap su un elemento SVG.Perché il popover di Bootstrap di Twitter non funziona con gli elementi SVG?

Qualche idea? Il popover funziona sul div normale.

jsFiddle è qui: http://jsfiddle.net/JjAht/

<!DOCTYPE html> 
<html> 
<head> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet"> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" rel="stylesheet"> 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script> 
</head> 
<body> 
<div> 
    <svg width="100" height="100"> 
     <circle r="45" cx="50" cy="50" style="fill: red"/> 
    </svg> 
</div> 

<div class="well"> 
    <p> 
    Hover here for a popover. 
    </p> 
</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     var numCircles = $("circle").length; 
     console.log("numCircles = " + numCircles); 

     $("circle").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'}); 

     $("circle").css({"stroke":"blue"}); 

     $(".well").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'}); 
    }); 
</script> 
</body> 
</html>

fonte

2012-12-19 Jon Stewart

Questa domanda può aiutare: http://stackoverflow.com/questions/3294553/jquery-selector-svg-incompatible Tuttavia, non ho potuto fare il loro lavoro sulla soluzione FF15. –

Ah, quindi la risposta è che SVG ha un'API simile ma incompatibile e Bootstrap/jQuery non può occuparsene. Bello. Sembra che dovrò rollare il mio pop-up. [questo esempio] (http://markhansen.co.nz/stolen-vehicles-pt2/) usa il popover Bootstrap (credo), ma non posso seguire tutto il codice. Grazie per il commento. –

-1

non è stato selezionato il formato SVG per aprire un popover, è per questo che non si apre. Guardate qui http://jsfiddle.net/JjAht/1/

$("svg").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});

fonte

2012-12-24 18:06:40 Chanckjh

Questo apre un popover sull'SVG nel suo complesso, ma, per essere chiari, quello che mi piacerebbe fosse un popover su elementi all'interno dello svg. Ad esempio, se avessi due cerchi, mi piacerebbe diversi popover per ciascuno. –

non sarebbe meglio fare 2 svg allora? – Chanckjh

Avrò qualche migliaio di elementi SVG, ognuno dei quali rappresenta un punto dati univoco. Mi piacerebbe che il popover presentasse informazioni sul punto dati univoco. Mettere ciascun elemento in un contenitore SVG separato non sembra fattibile. [Questo sito] (http://markhansen.co.nz/stolen-vehicles-pt2/) è un buon esempio di ciò che voglio fare ... per fortuna, si può leggere la fonte per questo. :-) –

Da questo esempio sembra che è necessario modificare Bootstrap per arrivare a questo lavoro.

Sotto bootstrap-tooltip.js sostituire:

con

if($('#'+this.$element[0].id,$('svg')).length > 0){ 
     $tip 
      .remove() 
      .css({ top: 0, left: 0, display: 'block' }) 
      .prependTo(document.body) 

     pos = $.extend({}, this.$element.offset(), { 
      width: this.$element[0].getBoundingClientRect().width 
      , height: this.$element[0].getBoundingClientRect().height 
     }) 
    } else { 
     $tip 
      .detach() 
      .css({ top: 0, left: 0, display: 'block' }) 
      .insertAfter(this.$element) 

     pos = this.getPosition(inside) 
    }

Ci sono stati fondamentalmente due problemi 1) bootstrap è stato l'inserimento del div per il tooltip/popover in SVG in cui il browser lo ignora e 2) le informazioni sulla posizione devono essere calcolate da SVG

Ho inviato questo come richiesta pull su Github https://github.com/twitter/bootstrap/pull/6521

Aggiornamento: Sembra che il bootstrap 2.3.0+ supporti questo tramite una nuova proprietà container per tooltips/popover. Quando si lavora con SVG, impostare container su body. Vedere i commenti qui https://github.com/twitter/bootstrap/pull/6521

Un esempio:

svg.selectAll(".node").each(
    function(d,i){ 
     $(this).popover({title:"title", content:"content", container:"body"}); 
     // and/or $(this).tooltip({title:"tooltip - title", container:"body"}); 
    });

fonte

2013-01-09 17:20:36

Grazie! Vedo che sei ad Alessandria; Sono a Washington. Ti farei volentieri una birra happy hour la prossima settimana. Puoi scrivermi a [email protected] –

Grazie mille per i trucchi.L'aggiunta di opzioni di contenitore funziona per me. Nota: lo sto usando per visualizzare popup su Openlayer ... –

Un altro parametro utile è 'viewport'. Ciò mantiene il popover entro i limiti di questo elemento. Di solito l'ho impostato sull'elemento SVG del contenitore – elachell

Con l'ultima versione di Bootstrap, l'aggiunta di un'opzione container con un elemento HTML all'interno sembra essere sufficiente per farlo funzionare!

$("circle").each(function() { 
    $(this).popover({ 
     title: "Hi!", 
     content: "popover", 
     container: $("#container") 
    }); 
});

fonte

2013-05-30 17:33:18

Assolutamente scosso per me, grazie mille! –

Suppongo che sarebbe meglio cambiare il contenitore in 'container:" body' .. BTW, buona soluzione lì .. –

Perché il popover di Bootstrap di Twitter non funziona con gli elementi SVG?

risposta

Problemi correlati