Tweak Existing Lumira Viz Extensions - Episode 5: Tooltips

[former_member183462]

Blog Series	Episode 1: Data Measures & Dimensions
Episode 2: Changing Colors	Episode 3: Axes
Episode 4: Chart Title & Legend	Episode 5: Tooltips
Episode 6: Data Labels	Episode 7: Adding Images

Related Links: Overview: SAP Lumira Extensions | Learn how | Viz Gallery I | Viz Gallery II

Welcome back, folks! After our short break from our mini blog series on modifying existing extensions, we will continue with the next episode: Tooltips!

Imagine you have a great-looking data visualization with attractive data points, but you find it hard to distinguish or pin-point between different data points. The answer to this problem - TOOLTIPS! Tooltips that appear on each data point on some event like mouse hover. Let's see how we can implement that into a chart that does not have a tooltip. There are many ways you can append a tooltip to your chart data points. We will cover one way of doing it. But the principle is the same - just understand your visualization and get creative, you can build your own tooltips!

Step 1: CREATE EVENT FUNCTIONS

Adding tooltips to your chart comes at the very end, after you've drawn all the other elements in your chart. For our example, we will use a bubble chart.

Let's say we've already drawn the basic bubble chart and grouped each of the data points as bubbles into a variable called "bubbles". We will use this same variable to create our tooltip events - mouse over and mouse out, and we will write tooltip code into these event functions later. Essentially, your code should look like this:

bubbles.on("mouseover", function(d) {

//add mouse over events

  })

  .on("mouseout", function() {

//add mouse out events

});

What this means is that, we have create two functions to be executed:

• One for when the mouse pointer hover over a particular data point: mouseover
• One for when the mouse pointer leaves the data point: mouseout

In other words, "This is officer Mouse - over and out!" Roger that!

Step 2: MOUSE OVER FUNCTION

Let's move to our mouse over event first. This is where we actually draw our tooltip and put it in the mouse over function, so that it shows up only on a mouse over event. There are four sub-steps to this section:

1. Finding where your mouse pointer is
2. Drawing your tooltip element - the main guy!
3. Putting your tooltip text into it
4. Enclosing it all in a container

Let's go over each of these sub-points one by one

Step 2A: FIND THE MOUSE POINTER POSITION

//declare variable for getting current mouse position

var position = d3.mouse(this);

What this piece of code does is, it finds out where your mouse position is located on the screen in real time, using a D3 capability called d3.mouse(this)

And we assign this to the variable "position"

Step 2B: APPEND A TOOLTIP CONTAINER ELEMENT

Next, we define our main tooltip element that will be generated once we hover over with the mouse and get the current mouse location. Every component of the tooltip will be contained inside of this element.

    //append tooltip element

    var tooltip = vis.append("g")

        .attr("class", "sap_viz_ext_bubblechart_tooltip-container");

Step 2C: APPEND TOOLTIP TEXT

Now we define what goes in our tooltip - the tooltip text.

    //append tooltip text

  var tooltip_text = tooltip.append("text")

        .attr("x", "position[0] - 50")

        .attr("y", "position[1] + 15")

        .html("<tspan dy=\"1.2em\">" + [dim] + "</tspan>:

              <tspan>" + d[dim] + "</tspan>");                                 

For now, we will just add the name of the data points (dimensions) to the tooltip. Later, we can focus on adding other data attributes. This code snippet above gives us:

When we hover over a particular data point, we can now see tooltip text that has been appended to the invisible tooltip container.

We can also edit this in any way we want. For example, let's make the dimension column name, "Item", in bold font to distinguish it from the dimension attribute, "Lambda". Just edit the last line of the previous code snippet to this:

  .html("<tspan dy=\"1.2em\" font-weight=\"bold\">" + [dim] + "</tspan>:

          <tspan>" + d[dim] + "</tspan>"); 

And this is what we get:

The difference is just that we added a bold font to the first part of the text.

We can also add other data attributes (measures) to the tooltip, for each data point:

  .html("<tspan dy=\"1.2em\" font-weight=\"bold\">" + [dim] + "</tspan>:

          <tspan>" + d[dim] + "</tspan>" +

      "<tspan dy=\"1.2em\" font-weight=\"bold\"  x=\"" +

          (position[0] - 50) + "\">" + [measure1] + "</tspan>:

          <tspan>" + d[measure1] + "</tspan>" +

      "<tspan dy=\"1.2em\" font-weight=\"bold\"  x=\"" +

          (position[0] - 50) + "\">" +[measure2] + "</tspan>:

          <tspan>" + d[measure2] + "</tspan>" +

      "<tspan dy=\"1.2em\" font-weight=\"bold\"  x=\"" +

          (position[0] - 50) + "\">" + [measure3] + "</tspan>:

          <tspan>" + d[measure3] + "</tspan>");

This gives us the following result:

You can add or remove details as you please.

Step 2D: APPEND TOOLTIP LABEL

Now we come to the last and final step of appending our tooltip element - drawing a visible rectangular label that encompasses our tooltip content. We use the getBBox() method, which is native for SVG, to get the bounding box for our tooltip text elements. We then add styling to the appended bounding box element.

    var bbox = tooltip_text.node().getBBox();

    var bboxw = bbox.width * 1.1;

    tooltip.append("rect")

    .attr("class", "sap_viz_ext_bubblechart_tooltip-label") 

    .attr("x", position[0] - 55) 

    .attr("y", position[1] + 15) 

    .attr("width", bboxw) 

    .attr("height", 75) 

    .attr("fill", "#F9FBF7") 

    .attr("stroke", "#000") 

    .attr("stroke-width", 0.5) 

    .style("opacity", 0.3);

We get results like:

   

Step 3: MOUSE OUT FUNCTION

We're almost done now. We just need to make sure that once we remove the mouse pointer from a bubble, the tooltip should disappear. This is important because, after accessing one bubble's tooltip, we want to be able to access the tooltips for the other bubbles too, without each tooltip overlapping on top of the other as they are accessed.

In our mouse out function, we just add the following code snippet so that the function looks like this:

    .on("mouseout", function() {

          d3.select("sap_viz_ext_bubblechart_tooltip-container").remove();

    });

And we're all set. Again, this was an example of how you can add tooltips to a chart. There are so many other ways to do it, and different developers will have their own unique ways to do add their own custom tooltips. This is one way of doing it. Feel free to reference this, or create your own!

Watch out for our next episode: Data Labels!

Happy tooltipping!! :smile: