Wie man eine Tooltip zu einer Svg-Grafik hinzufügen?

Ich habe eine Reihe von SVG-Rechtecke (mit D3.js) und ich möchte eine Nachricht auf Mouseover anzeigen, sollte die Nachricht von einer Box umgeben sein, die als Hintergrund fungiert. Sie sollten beide perfekt zueinander und zum Rechteck (oben und zentriert) ausgerichtet sein. Was ist der beste Weg, dies zu tun?Wie man eine Tooltip zu einer Svg-Grafik hinzufügen?

Ich habe versucht, einen SVG-Text mit den Attributen "x", "y", "Breite" und "Höhe", und dann eine Svg-Rect vor. Das Problem ist, dass der Bezugspunkt für den Text in der Mitte ist (da ich möchte, dass er zentriert ausgerichtet ist, benutzte ich text-anchor: middle), aber für das Rechteck ist es die obere linke Koordinate, plus ich wollte ein bisschen Rand um den Text, der es freundlich macht eines Schmerzes.

Die andere Option war ein HTML-Div, das wäre nett, weil ich den Text und Padding direkt hinzufügen kann, aber ich weiß nicht, wie die absoluten Koordinaten für jedes Rechteck zu bekommen. Gibt es eine Möglichkeit, dies zu tun?

Quelle

2012-05-17 nachocab

Wenn es keinen anderen Weg, ich – nachocab

Vermutung ist, dass ein Problem Markup für was es entworfen wurde? – Phrogz

Es ist nur, dass es nicht so schön aussieht, aber ich schätze deine Antwort – nachocab

Sie können das Titelelement wie von Phrogz angegeben verwenden. Es gibt auch einige gute Tooltips wie jQuery Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (die verwendet werden können alle Titel Elemente zu ersetzen), Bob Monteverde nvd3 oder sogar die Tooltip des Twitter von ihren Bootstrap http://twitter.github.com/bootstrap/

Quelle

2012-05-17 21:06:19 paxRoman

Können Sie einfach den SVG <title> element und den Standard-Browser-Rendering verwenden? (Hinweis: Dies ist nicht das gleiche wie das title Attribut, das Sie auf div verwenden können/img/in html Pannen, braucht es ein Kind Element sein genannt title)

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

<p>Mouseover the rect to see the tooltip on supporting browsers.</p> 
 

 
<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect> 
 
    <title>Hello, World!</title> 
 
    </rect> 
 
</svg>

Alternativ

, wenn Sie wirklich HTML in Ihrem SVG zeigen möchten, können Sie HTML-Code direkt einbinden:

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

 
foreignObject { 
 
    width: 100%; 
 
} 
 

 
svg div { 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect/> 
 
    <foreignObject> 
 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
 
     <div> 
 
     Hello, <b>World</b>! 
 
     </div> 
 
    </body>  
 
    </foreignObject> 
 
</svg>

... aber dann müsste JS das Display ein- und ausschalten. Wie oben gezeigt, besteht eine Möglichkeit, die Beschriftung an der richtigen Stelle erscheinen zu lassen, darin, das Rect und HTML in dasselbe <g> zu verpacken, das sie beide zusammenstellt.

Um JS zu verwenden, um herauszufinden, wo sich ein SVG-Element befindet, können Sie getBoundingClientRect(), z. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Quelle

2012-05-17 21:06:16 Phrogz

Funktioniert nett für mich, um Titel zu einem Svg-Element einzufügen! –

Schöne Antwort. Beachten Sie jedoch, dass 'foreignObject' [in Internet Explorer nicht unterstützt wird] (https://caniuse.com/#search=foreignObject) –

Wie man eine Tooltip zu einer Svg-Grafik hinzufügen?

Antwort

Verwandte Themen