d3 how to add image to the label of a graph node?

Question

I've made a fast stand-alone part of the project I have as to show you my problem. I have this circle that represent a node in my graph and what I want is to have on mouseover a box appearing with some text and image. This far I have the node, the box and the text. My problem is that the image doesn't appear, there is only a border of the space dedicated to the image and nothing inside. I don't know if I'am using the right order of appending things?
I`m using a div that is created initially and it's invisible, then I create the circle and bind a listener to it for the mouseover event. The listener appends to the div a text field and the image. For the image it gives the href attribute and on mouseout it renders the div invisible again. Would you help me find what is going wrong in all this....thank you!

    //the box, invisible for now
    var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
    .style("width","60px")                  
    .style("height","28px")                 
    .style("padding","2px")             
    .style("font","12px sans-serif")
    .style("border","0px")      
    .style("border-radius","8px")  
    .style("background", "lightsteelblue")
.style("visibility", "hidden");

    //the svg container
    var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500);

    //the node        
    svg.append("circle")
        .attr("class", "logo")
        .attr("cx", 225)
        .attr("cy", 225)
        .attr("r", 20)
        .on("mouseover", function(d){
            tooltip.text("some text"); 
            tooltip.append("image")
                    .attr("href","https://github.com/favicon.ico")
                    .attr("x", -8)
                    .attr("y", -8)
                    .attr("width","16px")                  
                    .attr("height","12px"); 
            tooltip.style("visibility", "visible");
        })
        .on("mousemove", function(){return tooltip.style("top", (event.pageY-                   
                                      10)+"px").style("left",(event.pageX+10)+"px");})
        .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

Answer 1

You need to change image to img and href to src . Complete working example here .