Tooltip is not displaying in the exact position in D3.js code

Question

Tooltip is not diaplying in the appropriate area.I'm using D3.js

var divLink = d3.select(el[0]).append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

.attr("id",function(d){
    return d.linkID;})
    .style("stroke-width", 0.7)
    .style("fill", "none")
    .on("mouseover", function(d) {
        var dx = (d.x+30), dy = (d.y+155)-$('#svgWrapper').scrollTop();
        divLink.transition()        
        .duration(200)      
        .style("opacity", .9); 
        // When links are hovered, tool tip is created
        if(d.source.type.toLowerCase()=="rack" || d.target.type.toLowerCase()=="rack")
        {
            divLink.html("<b>Link Details: </b><br/><br/>"+"<b>Link Id: </b>"+d.linkID +"<br/>"
                    +"<b>Device1: </b>"+d.source.name+"<br/>"+ "<b>Device2: </b>"+d.target.name+"<br/>") 
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
        }else{
            divLink.html("<b>Link Details: </b><br/><br/>"+"<b>Link Id: </b>"+d.linkID +"<br/>"+"<b>Link Speed: </b>"+d.linkSpeed+"<br/>"
                    +"<b>Device1: </b>"+d.source.name+"<br/>"+ "<b>Ports at Device1: </b>"+d.sport+"<br/>"+"<b>Device2: </b>"+d.target.name+"<br/>"
                    + "<b>Ports at Device2: </b>"+d.tport+"<br/>") 
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
        }
    })                  
    .on("mouseout", function(d) { 
        divLink.transition()        
        .duration(500)      
        .style("opacity", 0);  

    });

Something is in the style, because of that i'm getting this error. Actually i'm having one more tooltip for another tool there the tooltip is placing in the exact area.

var div = d3.select(el[0]).append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);



// Device Node Creation
var node = svg.selectAll(".node")
.data(networkObject.nodes)
.enter()
.append("g")
.attr("id",function(d){return d.name;})
.attr("class","node")
.attr("transform", function(d) {
    return "translate(" + d.x + "," + (d.y) + ")"; })
    .on("mouseover", function(d) { 
        var dx = (d.x+30), dy = (d.y+155)-$('#svgWrapper').scrollTop();
        div.transition()        
        .duration(200)      
        .style("opacity", .9);   
        // Tool tip when hovered on particular device node
        if(d.type.toLowerCase()=="rack"){
            div.html("<b>Rack Details: </b><br/><br/>"+"<b>Rack Id: </b>"+d.name +"<br/>"+"<b>TOR Switches: </b>"+d.tor+"<br/>"+"<b>Management Switches: </b>"+d.mgmt+"<br/>"+"<b>Hosts: </b>"+d.host+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")  
            .style("left",dx + "px")     
            .style("top", dy + "px");    
        }else if(d.type.toLowerCase()=="switch" && d.role.toLowerCase()=="spine"){
            div.html("<b>Switch Details: </b><br/><br/>"+"<b>Switch Id: </b>"+d.name +"<br/>"+ "<b>Role: </b>"+d.role+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")  
            .style("left", dx + "px")     
            .style("top", dy + "px");    
        }else if(d.type.toLowerCase()=="switch"){
            div.html("<b>Switch Details: </b><br/><br/>"+"<b>Switch Id: </b>"+d.name +"<br/>"+ "<b>Role: </b>"+d.role+"<br/>"+"<b>Rack: </b>"+d.rack+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")  
            .style("left", dx + "px")     
            .style("top", dy + "px");    
        }else if(d.type.toLowerCase()=="host"){
            div.html("<b>Host Details: </b><br/><br/>"+"<b>Host Id: </b>"+d.name +"<br/>"+"<b>Rack: </b>"+d.rack+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")  
            .style("left", dx + "px")     
            .style("top", dy + "px");
        }else if(d.type.toLowerCase()=="corporate"){
            div.html("<b>Corporate Network</b><br/><br/>")  
            .style("left", dx + "px")     
            .style("top", dy + "px");
        }
    })                  
    .on("mouseout", function(d) { 
        div.transition()        
        .duration(100)      
        .style("opacity", 0);   
    });

Answer 1

So actually i found the answer for this, i added the coordinates for the x and y. then the tooltip was working, I don't think, this should be a permanent solution for this.If anyone has any other answers please post that.Thanks

                    .style("left", (d3.event.pageX-460) + "px")
                    .style("top", (d3.event.pageY - 50) + "px");