Come aggiungere un suggerimento a un grafico svg?

Ho una serie di rettangoli svg (usando D3.js) e voglio visualizzare un messaggio sul mouseover, il messaggio dovrebbe essere circondato da una casella che funge da sfondo. Dovrebbero entrambi essere perfettamente allineati l’uno con l’altro e con il rettangolo (in alto e al centro). Qual è il modo migliore per farlo?

Ho provato ad aggiungere un testo svg usando gli attributi “x”, “y”, “width” e “height”, e quindi prependo un file svg rect. Il problema è che il punto di riferimento per il testo è nel mezzo (dal momento che lo voglio centrato allineato ho usato l’ text-anchor: middle ), ma per il rettangolo è la coordinata in alto a sinistra, inoltre volevo un po ‘di margine attorno al testo che lo rende un po ‘un dolore.

L’altra opzione stava usando un div html, che sarebbe bello, perché posso aggiungere direttamente il testo e il padding, ma non so come ottenere le coordinate assolute per ogni rettangolo. C’è un modo per fare questo?

È ansible utilizzare l’elemento titolo come indicato da Phrogz. Ci sono anche alcuni buoni suggerimenti come Tipsy di jQuery http://onehackoranother.com/projects/jquery/tipsy/ (che può essere usato per sostituire tutti gli elementi del titolo), nvd3 di Bob Monteverde o anche il tooltip di Twitter dal loro http Bootstrap : // twitter.github.com/bootstrap/

Puoi usare semplicemente l’ elemento SVG e il browser predefinito che lo trasmette? (Nota: questo non è lo stesso dell’attributo title che puoi usare su div / img / spans in html, deve essere un elemento figlio chiamato title )

 rect { width: 100%; height: 100%; fill: #69c; stroke: #069; stroke-width: 5px; opacity: 0.5 } 
 

Mouseover the rect to see the tooltip on supporting browsers.

Hello, World!

L’unico buon modo che ho trovato è stato usare Javascript per spostare un tooltip

giro. Ovviamente questo funziona solo se hai SVG all’interno di un documento HTML – non autonomo. E richiede Javascript.

 function showTooltip(evt, text) { let tooltip = document.getElementById("tooltip"); tooltip.innerHTML = text; tooltip.style.display = "block"; tooltip.style.left = evt.pageX + 10 + 'px'; tooltip.style.top = evt.pageY + 10 + 'px'; } function hideTooltip() { var tooltip = document.getElementById("tooltip"); tooltip.style.display = "none"; } 
 #tooltip { background: cornsilk; border: 1px solid black; border-radius: 5px; padding: 5px; }