CODEWITHSUNDEEP
javascriptjquerycsssvgmouseover
Lyner Kharl
Lyner Kharl

Reputation: 125

how do i position a div just beside the image in mouseover using jquery?

I managed to do a mouse over, using jQuery. wherein I declare a div inside it

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);
});

so when i hover on the circle the div showed its just that its not positioned beside the circle. its on the upper left of the screen. How can I put it near the circle?

check it here http://jsfiddle.net/3mdszohq

Upvotes: 1

Views: 170

Answers (1)

Finoy Francis
Finoy Francis

Reputation: 696

I have rewritten your code on jsFiddle. I hope this will help you to resolve the issue:

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.

Upvotes: 3

Related Questions