D3 tooltip not displaying - d3.js

Question

I am having an issue displaying a tooltip while changing the color of the element the tooltip is for. I can comment out the tooltip code and the stroke color will change for the element but I need both the tooltip and the class change to occur. Any help is greatly appreciated. Here is what I am talking about:
var svg = d3.select("#app_dataPlane")
.append("svg")
.attr("width", width)
.attr("height", height);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return "<strong>DPID:</strong> <span style='color:red'>" + d.name + "</span><br />" + "<strong>State:</strong> <span style='color:red'>" + d.state + "</span>";
})
svg.call(tip);
var link = svg.selectAll(".link")
.data(topoObj.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", 2)
.on("mouseover", function (d) {
d3.selectAll(".link").classed("selectedLink", false);
d3.select(this).classed("selectedLink", true);
d3.select("#app_srcSwitch").html(d.source.name);
d3.select("#app_destSwitch").html(d.target.name);
});
var node = svg.selectAll(".switch")
.data(topoObj.nodes)
.enter()
.append("circle")
.attr("r", 6)
.attr("stroke", "white")
.attr("class","switch")
.attr("fill", function (d) {
if (d.group == 1) {
return "#15a9ff";
} else if (d.group == 2) {
return "#f98802";
} else if (d.group == 3) {
return "#ca5eff";
} else if (d.group == 4) {
return "#37a302";
} else if (d.group == 5) {
return "#00a4b0";
} else if (d.group == 6) {
return "#ff6054";
} else if (d.group == 7) {
return "#7b75ff";
} else if (d.group == 8) {
return "#b77264";
} else {
return "#8c8c8c";
}
})
.on('mouseover', function (d) {
d3.selectAll(".switch").classed("selectedSwitch", false);
d3.select(this).classed("selectedSwitch", true);
d3.select("#app_stateInfo").html(d.state);
d3.select("#app_dpidInfo").html(d.name);
d3.select("#app_InstanceInfo").html(d.onosInstance);
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.call(force.drag);

Answer 1

Subsequent calls to .on("mouseover", ...) overwrite what you've set there previously. To combine several things, execute them all in the handler function:
.on('mouseover', function (d) {
d3.selectAll(".switch").classed("selectedSwitch", false);
d3.select(this).classed("selectedSwitch", true);
d3.select("#app_stateInfo").html(d.state);
d3.select("#app_dpidInfo").html(d.name);
d3.select("#app_InstanceInfo").html(d.onosInstance);
tip.show();
});