ensure node labels are not obstructed by other nodes

I have a dense network, and when my mouse hovers over nodes, the label is sometimes obstructed by other nodes. I would love it if the text was 'on top of' all nodes.

I tried my hand at this myself in the code below. The weird thing is that the stand-alone version of the code works fine when opened as an html file. But when I give it to shiny using cat() and htmlOutput(), the next labels appear at the bottom of the screen.

.link {
stroke: #666;
opacity: 1;
stroke-width: 1.5px;
}

.node circle {
stroke: #fff;
opacity: 1;
stroke-width: 1.5px;
}

.node:not(:hover) .nodetext {
display: none;
}

text {
font: 7px serif;
opacity: 1;
pointer-events: none;
}

var nodes = [ { "name" : "Bart ", "group" : 5 }, { "name" : "Lisa ", "group" : 4 }, { "name" : "Marge ", "group" : 9 }, { "name" : "Homer ", "group" : 1 }, { "name" : "Smithers ", "group" : 5 }, { "name" : "Maggie ", "group" : 5 }];
var links = [ { "source" : 0, "target" : 4, "value" : 1 }];
var width = 800
height = 800;

var color = d3.scale.category20();

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-120)
.on("tick", tick)
.start();

var svg = d3.select("#networkPlot").append("svg")
.attr("width", width)
.attr("height", height);

var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });

//added tooltip
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("color", "black")
.style("background-color", "#FEFCFF")
.style("border", "solid 1 #726E6D")
.style("visibility", "hidden");

//updated mouseover and mouseout, added mousemove
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 1)
.on("mouseover", function(d) {
tooltip.html(d.name)
.style("visibility", "visible")
.attr("cursor", "hand");
})
.on("mousemove", function(){
tooltip.style("top", (d3.event.pageY - 10)+"px")
.style("left",(d3.event.pageX + 10)+"px");
})
.on("mouseout", function(){
tooltip.style("visibility", "hidden");
})
.call(force.drag);

node.append("circle")
.attr("r", 6)

function tick() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

Start with the embedded D3 reproduction and compare its standalone HTML behavior with the version passed to Shiny through cat() and htmlOutput(). Verify that hovered node labels stay above other nodes in the rendered Shiny network, rather than appearing at the bottom of the screen.

Written by the indexing model from the issue text.