Jak wyświetlić etykietę programu ładującego z obiektem SVG?

Szaleję próbując zrozumieć, dlaczego mogę pokazać podpowiedzi na regularnych elementów HTML, ale nie na D3 generowanych pomostów żylnych: http://jsfiddle.net/nachocab/eQmYX/5/Jak wyświetlić etykietę programu ładującego z obiektem SVG?

Co robię źle?

$(document).ready(function() { 
    $("a").tooltip({ 
     'placement': 'bottom' 
    }); // this works 

    $("my_circle").tooltip({ 
     'placement': 'bottom' 
    }); // this does not work 
});

Źródło

2013-02-04 nachocab

jQuery nie gra ładnie z SVG. Spróbuj https://github.com/shawnbot/d3-bootstrap – Duopixel

Nie oglądałem jeszcze projektu d3-bootstrap ... Jeśli to możliwe, być może będziesz musiał skorzystać z pliku svg. http://jsfiddle.net/BCsGc/1/ – mg1075

@nachocab - Być może całkowicie czegoś brakuje, ale ... Przyjąłeś odpowiedź od lephixa. Czy masz działający przykład tego, że generowane są podpowiedzi do bootstrapów i czy są widoczne? Po pierwsze, lephix ma "d3.tooltip()", ale uważam, że jest źle: musi to być "bootstrap.tooltip()". Oto widelec twojego skrzypiec: http://jsfiddle.net/7bNgC/11/ Jasne, etykieta narzędziowa jest generowana, ale wciąż nie jest widoczna. – mg1075

Problem polegał na tym, że etykietka że Bootstrap V2.2.2 generuje to <div> że był już umieszczony wewnątrz <svg>, który wydał przeglądarka nie czynią go.

Skończyło się na użyciu najnowszej wersji rozwojowej Bootstrap Tooltip, która dodaje nowy parametr do określenia kontenera etykiety narzędzi. Teraz mogę zrobić:

$(".my_circle").tooltip({ 
    'container': 'body', 
    'placement': 'bottom' 
}); // this works!

EDIT - rok później

Dla przypomnienia, rzuciłem wymóg jQuery i jestem teraz przy użyciu doskonałą d3-tip Justin Palmer.

Źródło

2013-02-06 18:34:23 nachocab

Oczywiście '$ (". My_circle ")', z kropką. – krawyoti

Co robię źle tutaj? To nie wydaje się działać. http://jsfiddle.net/selvaG/eQmYX/39/ – selvagsz

Zaktualizowałem twój jsfiddle - możesz dołączyć do wszystkich elementów svg circle za pomocą $ ('svg circle'). tooltip ... http: // jsfiddle. net/eQmYX/41/ –

Użyj biblioteki d3-bootstrap. Ta biblioteka dostarcza alertów, symboli popover i funkcji podpowiedzi zgodnych z D3.js Możesz dodać następujący kod do swojego jsFiddle.

Dodaj to w twojej głowie.

<script src="https://github.com/shawnbot/d3-bootstrap/blob/master/d3-bootstrap.js"/>

Dodaj to w swoim kodzie.

d3.selectAll(".my_circle") 
    .call(d3.tooltip().placement("right"));

Źródło

2013-02-05 06:05:31 lephix

to nie działa, patrz komentarz mg1075 jsfiddle.net/7bNgC/11 – nachocab

Nie działa na elementach SVG – superphonic

Jak wyświetlić etykietę programu ładującego z obiektem SVG?

Odpowiedz

Powiązane problemy