jquery를 사용하여 mouseover의 이미지 옆에 div를 배치하는 방법은 무엇입니까?

Question

jQuery를 사용하여 마우스를 관리했습니다. I는 DIV 선언 상기 난 원을 가리키면는

nodeEnter.append("circle") 
.attr("r", 30) 
.style("stroke", "white") 
.style("stroke-width", 4) 
.attr("fill", "url(#img)") 
.on("mouseover", function(d) { 
    0; 

    div.transition() 
     .duration(500) 
     .style("opacity", .9) 


    div.html(
     "<div id='hover'>" + 
     "<div>" + 
     "<div>" + 
     "<div>" + 
     "<div class='g-hover-card'>" + 
     "<img src='" + d.cover + "' alt='' />" + 
     "<div class='user-avatar'>" + 
     "<img src='" + d.img + "' alt='' />" + 
     "</div>" + 
     "<div class='info'>" + 
     "<div class='description'>" + 
     "<font size='5px'>" + d.name + "</font>" + "<br /><font color='black'>" + d.relationship + "</font>" + 

     "</div>" + 
     "</div>" + 
     "<div class='bottom'>" + 
     "<br/>" + 
     "<a onclick=\"window.open('http://facebook.com/" + d.id + ");\" rel='publisher' class='btn btn-primary btn-block'>" + "Follow on Facebook" + 
     "</a>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" 

    ) 

}) 

.on("mouseout", function(d) { 
    div.transition() 
     .duration(500) 
     .style("opacity", 0); 
}); 

그래서 DIV가 나타났다는 그 내부에 상기 원의 옆에 위치하지 단지. 그것의 왼쪽 상단에있는 화면. 원 근처에 어떻게 놓을 수 있습니까?

내가 jsFiddle에 코드를 다시 한 여기 http://jsfiddle.net/3mdszohq

Answer 1

를 확인합니다. 나는이 문제를 해결하는 데 도움이되기를 바랍니다 :

nodeEnter.append("circle") 
.attr("r", 30) 
.style("stroke", "white") 
.style("stroke-width", 4) 
.attr("fill", "url(#img)") 
.on("mouseover", function(d) { 

    circlePos = this.getBoundingClientRect(); 

    div.transition() 
     .duration(500) 
     .style("opacity", .9) 
     .style("left", (circlePos.left + circlePos.width + window.scrollX) + 'px') 
     .style("top", (circlePos.top + window.scrollY) + 'px') 
     .style("position", "absolute") 


    div.html(
     "<div >" + 
     "<div>" + 
     "<div>" + 
     "<div>" + 
     "<div class='g-hover-card'>" + 
     "<img src='" + d.cover + "' alt='' />" + 
     "<div class='user-avatar'>" + 
     "<img src='" + d.img + "' alt='' />" + 
     "</div>" + 
     "<div class='info'>" + 
     "<div class='description'>" + 
     "<font size='5px'>" + d.name + "</font>" + "<br /><font color='black'>" + d.relationship + "</font>" + 

     "</div>" + 
     "</div>" + 
     "<div class='bottom'>" + 
     "<br/>" + 
     "<a onclick=\"window.open('http://facebook.com/" + d.id + ");\" rel='publisher' class='btn btn-primary btn-block'>" + "Follow on Facebook" + 
     "</a>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" + 
     "</div>" 

    ) 

}) 

.on("mouseout", function(d) { 
    div.transition() 
     .duration(500) 
     .style("opacity", 0); 
}); 

Code Demo.