Dlaczego popover Bootstrap nie działa z elementami SVG?

Jestem bardziej facetem w C++, ale obecnie pracuję nad niektórymi materiałami interfejsu WWW. Nie mogę uzyskać popover Bootstrap, aby pokazać się na elemencie SVG.Dlaczego popover Bootstrap nie działa z elementami SVG?

Wszelkie pomysły? Popover działa na normalnym div.

jsFiddle jest tutaj: 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>

Źródło

2012-12-19 Jon Stewart

To pytanie może pomóc: http://stackoverflow.com/questions/3294553/jquery-selector-svg-incompatible Jednak nie mogłem zrobić swoją pracę rozwiązanie na FF15. –

Ah, więc odpowiedź jest taka, że SVG ma podobne, ale niekompatybilne API i Bootstrap/jQuery nie może sobie z tym poradzić. Śliczny. Wygląda na to, że będę musiał uruchomić własne okno podręczne. [Ten przykład] (http://markhansen.co.nz/stolen-vehicles-pt2/) używa Popover Bootstrap (chyba), ale nie mogę wykonać całego kodu. Dziękuję za komentarz. –

-1

nie wybrano SVG otworzyć popover, dlatego nie będzie otwarty. Spójrz tutaj http://jsfiddle.net/JjAht/1/

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

Źródło

2012-12-24 18:06:40 Chanckjh

To otwiera popover na SVG jako całość, ale dla jasności, to, co idealnie mi się podoba, to popover na elementach wewnątrz svg. Na przykład, gdybym miał dwa kręgi, chciałbym mieć różne popover dla każdego z nich. –

Czy nie byłoby lepiej zrobić 2 svg? – Chanckjh

Będę miał kilka tysięcy elementów SVG, z których każdy reprezentuje unikalny punkt danych. Poproszę popover o przedstawienie informacji o unikalnym punkcie danych. Umieszczenie każdego elementu w oddzielnym pojemniku SVG wydaje się niewykonalne. [Ta strona] (http://markhansen.co.nz/stolen-vehicles-pt2/) jest dobrym przykładem tego, co chcę zrobić ... na szczęście można przeczytać źródło. :-) –

Od tego przykład to wygląda jak trzeba zmodyfikować Bootstrap aby uzyskać to do pracy.

Pod bootstrap-tooltip.js wymienić:

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

Były zasadniczo dwa problemy 1) bootstrap było wstawianie div za podpowiedzi/popover do SVG gdzie przeglądarki ignoruje go i 2) informacje o pozycji muszą zostać obliczone na podstawie SVG

Przesłałem to jako żądanie pobrania na Github https://github.com/twitter/bootstrap/pull/6521

Aktualizacja: Wygląda na to, że bootstrap 2.3.0+ będzie obsługiwał to poprzez nową właściwość container dla podpowiedzi/popovers. Podczas pracy z SVG ustaw container na body. Zobacz komentarze https://github.com/twitter/bootstrap/pull/6521

przykład:

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

Źródło

2013-01-09 17:20:36

Dzięki! Widzę, że jesteś w Aleksandrii; Jestem w DC. Chętnie kupiłbym ci szczęśliwą godzinę w przyszłym tygodniu. Możesz wysłać mi e-mail na adres [email protected] –

Wielkie dzięki za triki.Dodanie opcji kontenera działa dla mnie. Uwaga: Używam go do wyświetlania wyskakującego okienka na Openlayer ... –

Kolejnym użytecznym parametrem jest "rzutnia". Dzięki temu popover znajduje się w granicach tego elementu. Zazwyczaj ustawiam to jako element SVG kontenera – elachell

Dzięki najnowszej wersji Bootstrap, dodając opcję container z elementu HTML wewnątrz wydaje się być na tyle aby to działało!

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

Źródło

2013-05-30 17:33:18

Absolutnie kołysany dla mnie, wielkie dzięki! –

Myślę, że lepiej byłoby zmienić kontener na "kontener:" ciało ".. BTW, dobre rozwiązanie tam .. –

Dlaczego popover Bootstrap nie działa z elementami SVG?

Odpowiedz

Powiązane problemy