Tooltip

Introduction

Let’s dive into the last concept of interactivity, tooltip. Tooltip is an important concept for interactivity in D3.js. We will listen to an event, and every time that event occurs, we will update the information of the tooltip and show it on the screen.

Let’s take a look at the following example to understand the working of the tooltip.

Example

Let’s look at an example of a network and apply a tooltip to it.

Explanation

Let’s dive into the following explanation to better understand how the above code works.

• We have drawn the same network as we did in the Drawing a Network lesson.
• Line 21-28: We have made a var tooltip with the text tooltip, and we have made it hidden by using the visibility attribute.
• Line 54-59: We have made two event listeners, namely mouseover and mouseout. As we hover over the node, we change the text to the node’s name and make it visible in the top left corner, which is generally the ideal position for the tooltip. As we leave the node, we hide the tooltip again using the mouseout event.