Interaktive Grafiken: So fügst du Tooltips zu SVGs hinzu

Datenvisualisierungstools bieten coole Möglichkeiten, Daten zu präsentieren, aber manchmal möchtest du vielleicht eine noch anpassungsfähigere Art, ein Thema im Web zu präsentieren. Vielleicht hast du schon die perfekte Grafik, aber sie ist noch nicht interaktiv. In diesem Tutorial zeigen wir dir, wie du Tooltips zu deinen SVG-Grafiken hinzufügen kannst.

Von Marie-Louise Timcke
8/2/2016

Ein Beispiel für eine interaktive Grafik, die du nicht so einfach mit einer JavaScript-Bibliothek programmieren könntest, ist der folgende Lageplan der Düsseldorfer Rheinkirmes mit ihren Attraktionen und Essensständen, den ich für die Rheinische Post gebaut habe. Wenn du mit dem Mauszeiger über einige der Attraktionen fährst (Klick auf Touch-Displays), kannst du zusätzliche Informationen zu den Attraktionen als Text in sogenannten Tooltips finden.

Die Grundlage für die Karte ist ein einfaches, digital gezeichnetes Bild, das ich mit dem Design-Programm Sketch erstellt habe. Der Trick, den ich verwendet habe, um Tooltips zu einigen der Kartenelementen hinzuzufügen, erfordert nicht viel Programmierung oder Programmiererfahrung, und kann verwendet werden, um Tooltips zu jedem Website-Element hinzuzufügen, einschließlich divs, Texten und Bildern.

Legen wir also gleich los!

In diesem Tutorial werden wir Tooltips zu einer sehr einfachen Beispiel-SVG-Datei hinzufügen, die du hier herunterladen kannst. SVG steht für skalierbare Vektorgrafik. Es ist der Name eines Dateiformats, bei dem jedes Bildobjekt nicht durch die Farbe seiner einzelnen Pixel, sondern durch seine Grundformen und deren Attribute beschrieben wird. Ein großer Vorteil von SVG-Grafiken gegenüber anderen Formaten wie PNG oder JPEG ist, dass sie, wie der Name schon sagt, skalierbar sind, d.h. sie werden nie unscharf, egal wie stark du hineinzoomst. Eine Möglichkeit, SVG-Dateien zu erstellen, ist die Verwendung eines Designprogramms wie Illustrator, Inkscape oder Sketch.

Pro-Tipp: Mit RStudio kannst du Diagramme auch in diesem Format exportieren. Pimpe deine langweiligen Charts mit ein paar kreativen Elementen auf, wie ich es mit diesem gestapelten Barchart über Deutschlands Gründe für den Handel mit Müll getan habe:

Der folgende Screenshot zeigt das SVG-Bild, dem wir Tooltips hinzufügen werden. Es enthält ein großes, dunkles Rechteck mit einem türkisfarbenen Rahmen als Hintergrund, einen roten Kreis, einen gelben Stern und ein blaues Dreieck.

Screenshot einer SVG, die einen Kreis, einen Stern und ein Dreieck auf einem schwarzen Hintergrund zeigt, erstellt in der Sketch App

Wenn du das Bild als SVG-Datei speicherst und es mit einem Texteditor öffnest, bekommst du das hier:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="768px" height="447px" viewBox="0 0 768 447" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <defs>
        <rect id="path-1" x="0" y="0" width="768" height="447"></rect>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="768" height="447" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <g id="journocode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="example">
            <use id="Rectangle-1" stroke="#50E3C2" mask="url(#mask-2)" stroke-width="42" fill="#4A4A4A" xlink:href="#path-1"></use>
            <circle id="Oval-1" fill="#FF7979" cx="142.5" cy="147.5" r="92.5"></circle>
            <polygon id="Star-1" fill="#FFF681" points="384 349 328.748186 378.047597 339.300344 316.523799 294.600687 272.952403 356.374093 263.976201 384 208 411.625907 263.976201 473.399313 272.952403 428.699656 316.523799 439.251814 378.047597"></polygon>
            <polygon id="Triangle-1" fill="#A9FFEC" points="619 72 717 223 521 223"></polygon>
        </g>
    </g>
</svg>

Das ist nicht die typische Art und Weise, wie du erwartest, dass Bilder aussehen. Und das ist es, was SVG so großartig macht: Es übersetzt deine Grafik in einen Schnipsel XML-Code. XML-Dateien, oder Extensible Markup Language-Dateien, sehen sehr ähnlich aus wie HTML. Sie sind es aber nicht: XML wurde entwickelt, um Daten zu speichern, während HTML für die Darstellung von Daten zuständig ist, hauptsächlich im Web. XML hat keine vordefinierten Tags wie <a> oder <body>, wie es HTML hat. In XML bist du völlig frei, deine eigenen Tags zu erfinden, um verschiedene Teile deiner Daten zu beschreiben.

Willst du mehr zu HTML wissen? Sieh dir dieses Tutorial von Kira Schacht an

SVG-Grafiken folgen einer sehr spezifischen XML-Struktur. Versuche, den SVG-Code in den Body deiner Website einzubauen. Setze die SVG Breite auf 100%, lösche die Höheneinstellungen und speichere die Datei als index.html. Es sollte so aussehen:

<html>
<head>
</head>

<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" viewBox="0 0 768 447" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <defs>
        <rect id="path-1" x="0" y="0" width="768" height="447"></rect>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="768" height="447" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <g id="journocode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="example">
            <use id="Rectangle-1" stroke="#50E3C2" mask="url(#mask-2)" stroke-width="42" fill="#4A4A4A" xlink:href="#path-1"></use>
            <circle id="Oval-1" fill="#FF7979" cx="142.5" cy="147.5" r="92.5"></circle>
            <polygon id="Star-1" fill="#FFF681" points="384 349 328.748186 378.047597 339.300344 316.523799 294.600687 272.952403 356.374093 263.976201 384 208 411.625907 263.976201 473.399313 272.952403 428.699656 316.523799 439.251814 378.047597"></polygon>
            <polygon id="Triangle-1" fill="#A9FFEC" points="619 72 717 223 521 223"></polygon>
        </g>
    </g>
</svg>
</body> 
</html>

Interaktivität hinzufügen

Gut! Jetzt werden wir das jQuery Plugin Tooltipster benutzen, um Informationen zu diesem SVG hinzuzufügen! Das Plugin hat schöne Voreinstellungen und eine wirklich gute Dokumentation. Diese drei Schritte führen dich zu deinem ersten interaktiven SVG:

Schritt 1: Lade das Plugin herunter

Erstelle einen neuen Ordner, nenne ihn z.B. svg_interactive und speichere die index.html Datei darin.

Screenshot der Plugin-Dateien im erstellten Ordner

Die Skripte und Stylesheets des Plugins kannst du auf unserem GitHub Repository oder auf der Plugins Webseite finden und herunterladen. Der Hauptordner enthält viele Unterordner und Dokumente, die du kaum brauchst. Für unser Beispiel brauchen wir nur tooltipster.bundle.min.js, tooltipster.bundle.min.css und, für ein bisschen mehr Style, das Theme Sheet tooltipster-sideTip-punk.min.css. Du kannst entweder den gesamten Tooltipster-Ordner in svg_interactive speichern und dann die richtigen Pfade zu diesen Dateien in deinem HTML-Kopf setzen, oder du speicherst nur die drei Dateien, die du tatsächlich verwenden wirst, in deinem Ordner, wie wir es im Screenshot zeigen.

Schritt 2: Einbinden der Skripte

Setze die Pfade zu den Stylesheets und dem JS-Skript in den Head deiner Webseite. Vergiss nicht, jQuery einzubinden, da Tooltipster davon abhängig ist:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="tooltipster.bundle.min.css"/>
  <link rel="stylesheet" type="text/css" href="tooltipster-sideTip-punk.min.css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script type="text/javascript" src="tooltipster.bundle.min.js"></script>

</head>

<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" viewBox="0 0 768 447" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <defs>
        <rect id="path-1" x="0" y="0" width="768" height="447"></rect>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="768" height="447" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <g id="journocode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="example">
            <use id="Rectangle-1" stroke="#50E3C2" mask="url(#mask-2)" stroke-width="42" fill="#4A4A4A" xlink:href="#path-1"></use>
            <circle id="Oval-1" fill="#FF7979" cx="142.5" cy="147.5" r="92.5"></circle>
            <polygon id="Star-1" fill="#FFF681" points="384 349 328.748186 378.047597 339.300344 316.523799 294.600687 272.952403 356.374093 263.976201 384 208 411.625907 263.976201 473.399313 272.952403 428.699656 316.523799 439.251814 378.047597"></polygon>
            <polygon id="Triangle-1" fill="#A9FFEC" points="619 72 717 223 521 223"></polygon>
        </g>
    </g>
</svg>
</body>
</html>

Schritt 3: Füge Informationen zu den Bildelementen hinzu

Als nächstes fügen wir einen kleinen Schnipsel Java Script Code manuell in den Kopf ein. Du könntest diese paar Zeilen auch in einer extra .js Datei speichern und sie wie die anderen einbinden, aber für den Moment behalten wir sie einfach als Inline-Skript.

  <script>
    $(document).ready(function() {
        $('.tooltip').tooltipster({
        theme: 'tooltipster-punk',
        contentAsHTML: true
        });
    });
</script>

Dieses Snippet definiert eine tooltip Klasse mit dem Theme tooltipster-punk und legt fest, dass der Inhalt HTML sein wird. Wenn du

class="tooltip" title="Text <strong>Text</strong>"

zu einem SVG-Element hinzufügst, bekommt du einen tooltipster-punk Tooltip mit HTML gestyltem Text. Und das ist im Grunde alles!

Versuch zum Beispiel:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="tooltipster.bundle.min.css"/>
  <link rel="stylesheet" type="text/css" href="tooltipster-sideTip-punk.min.css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script type="text/javascript" src="tooltipster.bundle.min.js"></script>

  <script>
    $(document).ready(function() {
        $('.tooltip').tooltipster({
        theme: 'tooltipster-punk',
        contentAsHTML: true
        });
    });
</script>

</head>

<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" viewBox="0 0 768 447" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <defs>
        <rect id="path-1" x="0" y="0" width="768" height="447"></rect>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="768" height="447" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <g id="journocode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="example">
            <use id="Rectangle-1" stroke="#50E3C2" mask="url(#mask-2)" stroke-width="42" fill="#4A4A4A" xlink:href="#path-1"></use>

<!-- add class and title here! -->
            <circle id="Oval-1" fill="#FF7979" cx="142.5" cy="147.5" r="92.5" class="tooltip" title="I am a circle!"></circle>
            <polygon id="Star-1" fill="#FFF681" points="384 349 328.748186 378.047597 339.300344 316.523799 294.600687 272.952403 356.374093 263.976201 384 208 411.625907 263.976201 473.399313 272.952403 428.699656 316.523799 439.251814 378.047597" class="tooltip" title="<strong>Stars for the win</strong><br>I am a star!"></polygon> 
            <polygon id="Triangle-1" fill="#A9FFEC" points="619 72 717 223 521 223" class="tooltip" title="<p style='color:#F85D00'>Hell yeah!</p>"></polygon> 
        </g> 
    </g> 
</svg> 
</body> 
</html>

Wenn du nun den Stil des Tooltips ändern möchtest, kannst du einige CSS-Einstellungen in einem neuen Stylesheet speichern und es in den Kopf der Webseite einbinden. Du kannst zum Beispiel die Schriftfamilie, die Farbe des Popup-Hintergrunds, den Popup-Pfeil oder den standardmäßigen rosa Rand am unteren Rand wie folgt ändern:

.tooltipster-sidetip.tooltipster-punk
.tooltipster-box{
 border-bottom:3px solid #50E3C2; /*farbige Linie am Popup-Boden*/
 background:#fff /*Hintergrund des Popups*/
 }

/*Pfeil- und Rahmenfarbe je nachdem, wo sich der Tooltip öffnet (z.B. oberhalb oder unterhalb des Elements)*/
.tooltipster-sidetip.tooltipster-punk.tooltipster-top
.tooltipster-arrow-border{border-top-color:#50E3C2}

.tooltipster-sidetip.tooltipster-punk.tooltipster-bottom
.tooltipster-arrow-border{border-bottom-color:#fff}

.tooltipster-sidetip.tooltipster-punk.tooltipster-left
.tooltipster-arrow-border{border-left-color:#fff}

.tooltipster-sidetip.tooltipster-punk.tooltipster-right
.tooltipster-arrow-border{border-right-color:#fff}

.tooltipster-sidetip.tooltipster-punk
.tooltipster-content{color:#000;padding:8px 16px; font-family:'Arial';}

Speichere die Datei als style.css und binde sie in die .html-Datei ein. Du kannst auch den Auslöser für das Öffnen und Schließen der Tooltips in dem manuell hinzugefügten Java Script ändern. Du kannst sie auf Hover, Klick oder mit einem angepassten Auslöser wie diesem für mobile Endgeräte optimieren:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="tooltipster.bundle.min.css"/>
  <link rel="stylesheet" type="text/css" href="tooltipster-sideTip-punk.min.css"/> <link rel="stylesheet" type="text/css" href="tooltipster-sideTip-punk.min.css"/&gt
  <link rel="stylesheet" type="text/css" href="style.css"/> <link rel="stylesheet" type="text/css" href="style.css"/&gt
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script type="text/javascript" src="tooltipster.bundle.min.js"></script>

  <script>
  $(document).ready(function() {
      $('.tooltip').tooltipster({
      theme: 'tooltipster-punk',
      maxWidth': 270, // setzt die maximale Breite der Tooltip-Box
      contentAsHTML: true, // Titelinhalt auf html setzen
      trigger: 'custom', // benutzerdefinierten Trigger hinzufügen
       triggerOpen: { // öffnet den Tooltip, wenn das Element geklickt, getippt (mobil) oder mit dem Mauszeiger bewegt wird
           click: true,
           tap: true,
           mouseenter: true
           },
          triggerClose: { // Tooltip schließen, wenn das Element erneut angeklickt, angetippt oder mit der Maus verlassen wird
           click: true,
           scroll: false, // Sicherstellen, dass mobiles Scrollen kein Tappen ist!
           tap: true,
           mouseleave: true
           }
  });
  });
</script>

</head>

Und das ist das Ergebnis: Klicke darauf, fahre mit der Maus über die Symbole oder probiere es auf deinem Smartphone aus!

Sei also kreativ mit deinen Datenvisualisierungen, auch wenn komplexe Java Script Bibliotheken nicht dein Ding sind. Wie immer kannst du den gesamten Code zu diesem Beispiel auf unserer Github Seite bekommen. Wenn du Fragen oder Feedback hast, hinterlasse gerne einen Kommentar oder schreibe uns eine Mail!