title: How to make a d3.js tool tip with embeded HTML elements
body: <p>I am trying to make a tooltip with embedded elements such as img, h1 and p tags in d3.js. JavaScript is housed in a rails app. The tooltip is suppose to dynamically change the text upon hovering on a g element. Currently I am just trying to get one img tag to show up and text to dynamically change upon hover within one tool tip. However every time I try and accomplish this two things happen. Either the image or the text shows up (not both) or the javascript breaks all together. In the code below it just shows the text changing. The image does not show up at all. The code I have to make the tooltip is this:</p>
  
  <pre><code>var tooltip = d3.select("body")
  .append("div").attr("id", "tool_tip").style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden")
  .style("background-color", "yellow")//.style("top","100px").style("left","20px")
  .text("a simple tooltip").append("img").attr("src","http://www.metmuseum.org/~/media/Images/Metpublication/Cover/2004/Echoing_Images_Couples_in_African_Sculpture.jpg");
  </code></pre>
  
  <p>The code that dynamically changes the text and moves the tooltip on hover is this: </p>
  
  <pre><code> svg.append("g").attr("class","points")
    .selectAll("text").data(places.features)
  .enter().append("path").attr("r", function(d){return 1234567})
    .attr("class", "point")
    .on("mouseover", function(d) {
        var div = document.getElementById('profile');
        var test = $('#test').text();
        div.innerHTML = "";
        div.innerHTML = div.innerHTML + d3.event.pageY+ ' X:'+d3.event.pageX +'&lt;img src='+test+'&gt;';
  
  
        $('#tool_tip').css("top",d3.event.pageY);
        $('#tool_tip').css("left",d3.event.pageX);
  
  
        $('#tool_tip').css("visibility", "visible");
        $('#tool_tip img').css("visibility", "visible");
        var tool_tip = $('#tool_tip');
  
       // alert($(this).attr('d'));
  
        var j = places.features[0].properties.name
        //adding text to tool tip by different points
       // alert(JSON.stringify(d.properties.TeamName));
      // alert(JSON.stringify(d));
        $('#tool_tip').text(d.properties[0].TeamName);
  
       // return tooltip;//.style("visibility", "visible");
      //Warren you need to build out the pop up here.  Ideally you can pull the data from the json object "places.json."
  
    });
  </code></pre>