d3js make tooltip stay when clicked
<p>I have a text and I want to show a tip over it when I put my mouse on it. This is achieved. Now I want the tip to stay once I clicked on this text, and disappear when I click on the text again. How can I do this? It seems that 'tip.show' does't work for this purpose...</p>

<pre><code>nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6)
      .style("font-weight", function(d) { return d.father == undefined ? "":"bold";})
      .style("font-size", function(d) { return d.father == undefined ? "":"14px";})
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);
</code></pre>

<p>The definition of 'tip':</p>

<pre><code>  var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) { return "index: " + d.index + "&lt;br&gt;other information..."; });

  svg.call(tip);
</code></pre>

<p>Thanks!!!</p>