[Solved]-How can a tooltip in D3 fetch data dynamically?-d3.js

It might be worth reviewing the ideas behind d3 & data binding to the dom.

Here:

.on("mouseover", function(d) {
            var xPosition = 100;
            var yPosition = 100;
            d3.select("#tooltip")
                .data(pie(data)) // re-bind tooltip with entire data set
                  .style("left", xPosition + "px")
                  .style("top", yPosition + "px")
                  .select("#NumberStudents")
                  .text(function(d) { return d.value });
                //Show the tooltip
            d3.select("#tooltip").classed("hidden", false);
            })

The original data is an array. When you use .data, .enter and .each, not only is a segment of the pie chart created, but each segment also has a single data point bound to it.

So, when you tell the segment to react to a mouseover event, the d argument of the callback function will be set by d3 to the bound data point for that segment.

In contrast, in your code above, after selecting the #tooltip element, there's a call to .data(pie(data)) - which will bind the entire data set to the tooltip each time you mouseover - and is the cause of the unexpected behavior you observe.

Instead, use the single data item (d within the function here) and its value to set the text of the tooltip:

 .on("mouseover", function(d) {
            // d = the single data point used 
            //     to create the segment here
            var xPosition = 100;
            var yPosition = 100;
            d3.select("#tooltip")
                .style("left", xPosition + "px")
                .style("top", yPosition + "px")
                .select("#NumberStudents")
                  .text(d.value);

            d3.select("#tooltip").classed("hidden", false);
            })

To access the other values (separate from the one used to create the pie slices), check the docs for pie layout. The original datum will be in the .data attribute of d. So, for example, assuming your tooltip has a #SchoolType <span> then you can set the text from the Type attribute like:

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

            var xPosition = 100;
            var yPosition = 100;
            d3.select("#tooltip")
                .style("left", xPosition + "px")
                .style("top", yPosition + "px")
                .select("#NumberStudents")
                  .text(d.value)

            //d.data will hold the original data map
            d3.select("#tooltip #SchoolType").text(d.data["Type"]);

            d3.select("#tooltip").classed("hidden", false);
            })