title: Add graph in dc.js tooltip
body: <p>I'm building a number of graphs using <code>crossfilter</code> and <code>dc.js</code>. Among others, there is a row chart and an histogram (a bar chart).</p>
  
  <p>What I am trying to do is to create a tooltip on the row chart which will show the histogram.</p>
  
  <p>Looking at this <a href="https://stackoverflow.com/questions/24664079/d3-tooltips-for-multiple-linked-dc-js-charts">SO-question</a> I saw an example using <code>d3-tip</code>. I have made an attempt in this <a href="https://jsfiddle.net/raino01r/k41o3rpe/" rel="nofollow noreferrer">jsfiddle</a>. However, I cannot see how to embed a <code>div</code> in the tooltip.</p>
  
  <p>Any suggestion? (If using plain <code>d3</code> is better, I'm ok with that.)</p>
  
  <p>Snippet of code is:</p>
  
  <pre><code>function draw_row(div_id){ ...; return row_chart; }
  function draw_hist(div_id){ ...; return bar_chart; }
  
  var rate_chart = draw_row('#rate').title(function(){return'';});
  dc.renderAll();
  
  var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function () {
          // What to put in here???
          draw_hist('#distr').render();
          return "&lt;div id='distr'&gt;Distribution&lt;br&gt;&lt;/div&gt;"
      });
  d3.selectAll("#rate g.row")
      .call(tip)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);
  </code></pre>