Adding tooltips to d3.js map using csv file - d3.js

Question

I would like to add tooltips for a project previously discussed here:
How to apply specific colors to D3.js map based on data values?
I've added a style for the tooltip-container as follows:
<style>
#tooltip-container{
background: #eee;
box-shadow: 0 0 5px #999999;
color: #333;
display: none;
font-size: 12px;
padding: 10px;
position: absolute;
text-align: center;
right: 200px;
top: 300px;
width: 140px;
height: 230px;
z-index: 10;
}
</style>
I also added the html tooltip container in a div:
<div id="tooltip-container"></div>
I've revised my drawMap() function as follows:
function drawMap(conus) {
svg.selectAll(".feature")
.data(conus.features)
.enter().append("path")
.attr("class", "county")
.attr("id", function (d) { return d.properties.ID_1; }, true)
.attr("d", path)
.on("mouseover", function (d) {
$("#tooltip-container").show();
})
.on("mouseout", function () {
$("#tooltip-container").hide();
});
//Fill county colors
var dataRange = getDataRange();
d3.selectAll('.county')
.attr('fill', function (d) {
return getColor(d.properties[attributeArray[currentAttribute]], dataRange);
});
}
What I need to do now are as follows:
When a user clicks the STOP button, the tooltip-container should display the appropriate warning text for that day from the "warnings.csv" file. The csv file can be downloaded from here: https://nlet.brc.tamus.edu/Home/Swat) by selecting the Management tab in the SWAT download section and selecting the "Warnings csv file".
Then, as users hover over the map, the tooltip-container should switch to that county and display the appropriate warning for the county for that day.
Appreciate any help. Thanks in advance.

Answer 1

Never mind...solved this. I revised the following functions from this project:
<div id="tooltip-container"></div>
function drawMap(conus) {
var curr = $("#clock")[0].innerText;
var day = curr.charAt(0);
svg.selectAll(".feature") // select country objects (which don't exist yet)
.data(conus.features) // bind data to these non-existent objects
.enter().append("path") // prepare data to be appended to paths
.attr("class", "county") // give them a class for styling and access later
.attr("id", function (d) { return d.properties.ID_1; }, true) // give each a unique id for access later
.attr("d", path) // create them using the svg path generator defined above
.on("mouseover", function (d) {
$("#tooltip-container").show();
loadWarning(d, day);
})
.on("mouseout", function (d) {
$("#tooltip-container").hide();
});
var dataRange = getDataRange(); // get the min/max values from the current day's range of data values
d3.selectAll('.county')
.attr('fill', function (d) {
return getColor(d.properties[attributeArray[currentAttribute]], dataRange);
});
}
function loadWarning(d, day)
{
var html = "";
var tooltip = d3.select("#tooltip-container");
d3.csv("/data/warnings2.csv", function (error, data) {
for (var i in data) {
if (data[i].id == d.properties.ID_1) {
html += "<table><tr><strong>" + d.properties.County + "</strong></tr><br/>" +
"<tr>ID: " + d.properties.ID_1 + "</tr><br/><br/>" +
"<tr><div style='text-align:left'>" + data[i][day] + "</div></tr></table>";
tooltip.html(html);
}
}
});
}