Customize Tooltip in D3 Charts

Simplest way to customize your tooltip in d3 charts. To achieve a customize tooltip you need to follow these simple steps.

Step 1: First, think what you can show in tooltip. I have created pie chart using d3 charts.In my case I am showing a total votes of my candidate. So I have created one div tag as given below.

Note: Your element id should be uniqe for the element.

<div id="mytooltip" class="hidden">
  <p><strong>Total Votes:</strong></p>
  <p><span id="value">100</span></p>

Step 2: Style your div tag as per requirement. I have crearted style sheet like that.

#tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
#tooltip.hidden {
        display: none;
#tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
        line-height: 20px;

Step 3:Next step is to find out element on which you want tooltip. For this you have to find out left and top position of that element.You can find out element position using this code.

var getID ="id");             
var div = document.getElementById(getID);
var rect = div.getBoundingClientRect                    


  • rect.left contais left position value and contains value.
  • ‘this’ represents your current selected element

Step 4: Now you know on which element you want tooltip then you need to use

  • .on(“mouseover”, yourFuntion)
  • .on(“mouseout”, yourFuntion)
    • I used these funtion like this in my pie chart.

      yourSelectedElement.on("mouseover", function(d) {
              // find the element position   
          var getID ="id");                    
          var div = document.getElementById(getID);
          var rect = div.getBoundingClientRect();                                        
              // select your tooltip tag
            .style("left", rect.left + "px") // left position
            .style("top", + "px")   // right position
            .select("#value")           // this id is your div tag id.
                //show tooltip     
"#tooltip").classed("hidden", false);
          .on("mouseout", function() {
              //hide tooltip
    "#tooltip").classed("hidden", true);

      Leave a Reply