Come posso visualizzare una descrizione comando bootstrap con un oggetto SVG?

sto impazzendo cercando di capire perché posso mostrare i suggerimenti su elementi HTML regolari, ma non su SVG D3-generati: http://jsfiddle.net/nachocab/eQmYX/5/Come posso visualizzare una descrizione comando bootstrap con un oggetto SVG?

Che cosa sto facendo di sbagliato?

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

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

fonte

2013-02-04 nachocab

jQuery non funziona con SVG. Prova https://github.com/shawnbot/d3-bootstrap – Duopixel

Non hai ancora guardato il progetto d3-bootstrap ... Se è possibile, potresti dover usare svg . http://jsfiddle.net/BCsGc/1/ – mg1075

@nachocab - Forse mi manca totalmente qualcosa, ma ... Hai accettato la risposta da lephix. Avete un esempio funzionante di questo, delle descrizioni comandi di bootstrap generate e visibili? Prima di tutto, lephix ha "d3.tooltip()", ma credo che sia sbagliato: deve essere "bootstrap.tooltip()". Ecco una forchetta del tuo violino: http://jsfiddle.net/7bNgC/11/ Certo, il tooltip viene generato, ma non è ancora visibile. – mg1075

Il problema era che il tooltip che Bootstrap v2.2.2 genera è un <div> che è stato sempre inserito all'interno del <svg>, che ha reso il browser non renderlo.

Ho finito per utilizzare l'ultima versione di sviluppo di Bootstrap Tooltip, che aggiunge un nuovo parametro per determinare il contenitore del suggerimento. Ora posso fare:

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

EDIT - Un anno dopo

Per la cronaca, ho lasciato cadere il requisito di jQuery e ora sto utilizzando l'eccellente d3-tip da Justin Palmer.

fonte

2013-02-06 18:34:23 nachocab

Ovviamente '$ (". My_circle ")', con il punto. – krawyoti

Cosa sto facendo di sbagliato qui ?? Non sembra funzionare. http://jsfiddle.net/selvaG/eQmYX/39/ – selvagsz

Ho aggiornato il tuo jsfiddle - puoi allegare a tutti gli elementi del cerchio svg usando $ ('svg circle'). tooltip ... http: // jsfiddle. net/eQmYX/41/ –

Utilizzare la libreria d3-bootstrap. Questa libreria fornisce funzionalità di avviso, popover e tooltip compatibili per D3.js È possibile aggiungere il seguente codice al proprio jsFiddle.

Aggiungi questo nella tua testa.

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

Aggiungi questo nella parte del codice.

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

fonte

2013-02-05 06:05:31 lephix

non sembra funzionare, vedere il commento di mg1075 jsfiddle.net/7bNgC/11 – nachocab

Non funziona sugli elementi SVG – superphonic

Come posso visualizzare una descrizione comando bootstrap con un oggetto SVG?

risposta

Problemi correlati