#Howto use tooltips with 23degrees.io EN/GER

23°
4 min readAug 20, 2020

--

## Für Deutsche Version nach unten scrollen##

Tooltips are annotations for your chart or map that appear once you click or hover on a certain point in your visualization (either a geographical region on a map or a line or bar in a chart).

To start editing your tooltip go to your preferred visualization. Activate the editor mode by clicking on the pen icon. Then click on the tooltip section: fifth tab from above.

Tooltips can display three different types of information.

1. Text or unicode icons (static)
Simple text or unicode icons can be typed into your tooltip via tooltip editor. The text will remain static regardless of where you will place your click on the map or chart.

2. A data field from the corresponding data set of your visualization (modular)
Each inserted data field will display a characteristic (i.e row ) of a specific variable (i.e column) referring to a matching variable of the given row.

For example a world map showing the spread of new Covid 19 infections per day: when clicking on a country the tooltip will pop-up showing the information we have chosen to be displayed inside our tooltip.

To find the right information for the given country, year or group in our chart or map we have to know where the information we want to display in the tooltip can be found in the underlying data set. Therefore, we have to know the name of the column (header) = data field that holds our information.
Below we highlighted the data fields we’ve chosen for our tooltip.

Once you have chosen your data fields the displayed infos will always adapt according to the specific characteristic of the column.
The same holds true for a characteristic that can be assigned to a specific date and / or a specific property.

Another tooltip example:

The corresponding data set:

3. Charts inside tooltips
A third and perhaps a bit more tricky option is to place another visualization inside a tooltip. This will be explained in-depth in another blog entry.

Follow us!

twitter: @23degrees_io
fb: @23degrees.io
ig: @23degrees_io

## Deutsche Version ##

#Howto Tooltips mit 23degrees.io nutzen

Tooltips sind Anmerkungen zu einem Diagramm oder einer Karte, die erscheinen, sobald man auf einen bestimmten Punkt in einer Grafik klickt oder den Mauszeiger über einen bestimmten Punkt bewegt (z.B. eine Region auf einer Karte oder eine Linie / ein Balken in einem Diagramm).

Um mit der Gestaltung des Tooltips zu beginnen, gehe zur Visualisierung, die Du bearbeiten möchtest. Aktiviere den Editiermodus, indem Du auf das Stift-Symbol klickst. Klicke dann auf den Tooltip-Reiter(fünfter Reiter von oben).

Tooltips können drei verschiedene Arten von Informationen anzeigen:

1. Text- oder Unicode-Symbole (statisch)
Einfacher Text oder Unicode-Symbole können über den Tooltip-Editor eingegeben werden. Der Text bleibt statisch, unabhängig davon, wo man auf die Karte oder das Diagramm klickt.

2. Ein Datenfeld aus dem entsprechenden Datensatz der Visualisierung (modular)
Jedes eingefügte Datenfeld zeigt eine Ausprägung (Zeile) einer bestimmten Variable (Spalte) an, das sich auf eine übereinstimmende Variable der gegebenen Zeile bezieht.

Zum Beispiel eine Weltkarte, die die Ausbreitung neuer Covid-19-Infektionen pro Tag anzeigt: bei Klick auf ein Land öffnet sich ein Tooltip, das die Informationen anzeigt, die wir ausgewählt haben.

Um die richtige Information für die gegebene Region, Zeit oder die Gruppe in einem Diagramm oder einer Karte zu finden, müssen wir wissen, wo die Informationen, die wir im Tooltip anzeigen wollen, in dem der Visualisierung zugrunde liegenden Datensatz zu finden sind. Daher müssen wir den Namen der Spalte (Kopfzeile) = Datenfeld kennen, die die gewünschte Informationen enthält.

Unten sind die entsprechenden Datenfelder markiert, die wir für unser Tooltip ausgewählt haben.

Wenn die Datenfelder ausgewählt wurden, passen sich die angezeigten Informationen immer an das spezifische Merkmal der Spalte an. D.h. bei Klick auf ein Land werden nur die Information, die sich auf genau dieses Land beziehen (selbe Reihen im Datensatz) dargestellt. Das Gleiche gilt, wenn eine Ausprägung einem bestimmtem Datum und /oder einer bestimmten Eigenschaft zugeordnet werden kann.

Hier ein weiteres Tooltip-Beispiel:

Und der dazugehörige Datensatz:

3. Diagramme in den Tooltips
Eine dritte und vielleicht etwas kniffligere Möglichkeit ist die Platzierung einer anderen Visualisierung innerhalb eines Tooltips. Dies wird in einem weiteren Blog-Eintrag ausführlich erklärt.

Bis zum nächsten Mal…

Folge uns!

twitter: @23degrees_io
fb: @23degrees.io
ig: @23degrees_io

--

--

23°

Data visualization tool. Discover & create interactive #dataviz at http://app.23degrees.io