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.

5a.PNG

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:

5b.PNG

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:


5d.PNG

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

/wp-content/uploads/2016/03/5c_906359.png

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:

5e.PNG

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:

5f.PNG    5g.PNG



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!! 🙂

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. vivek kumar

    Hi Annie,

    I am using the custom tooltip in my visualization extension as guided by you but there is issue in the Lumira Desktop Compose preview mode. Position of the tooltip is not proper on hovering. Tooltip is also not working in BIP.

    Can you please guide how can i fix these issues.

    /wp-content/uploads/2016/05/tooltip_944283.png

    Regards,

    Vivek

    (0) 
    1. Annie Niangneihoi Post author

      Hi Vivek,

      Thanks for your feedback. Similar to the PDF export of Lumira extensions, tooltips are another aspect of visualization charts that work for native Lumira charts in the Compose room, but however may or may not work for viz extensions. This issue has been formerly identified as well and the development team is aware of it.

      As for BIP, I’m not very familiar with the platform since I focus more on Lumira desktop. Sorry about that.

      – Annie

      (0) 
  2. Bryce St Pierre

    Hello Annie,

    I know this post is quite old, but you seem to have quite a bit of experience developing these extensions for the SAP Lumira product. Have you had any success in implementing the logic in “render.js” for applying and removing filters on the dataset? Also, have you been able to implement the tooltip that Lumira’s default visualization uses, that allows for filtering and drilling when clicking on chart elements? Any information or advice would be greatly appreciated. Thank you.

    – Bryce

    (0) 

Leave a Reply