Q: Why svg text is unselectable? I'm trying to make selectable tooltip in D3.js
here is code:
var tooltip = obj.svg
  .append('g')
  .append('text')
  .attr("id", "tooltip")
  .text( "SPICE")
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .attr("fill", "red")
  .style("opacity", .0);

...
.on("click", function (d) {
        d3.selectAll("#tooltip").transition()
        .style("opacity", (obj.tooltipVisible && obj.tooltipId === d.id) ? 0.0 : 1)

And in browser as a result I have following element  (I have no any css for it either):
<g><text id="tooltip" font-family="sans-serif" font-size="20px" fill="red" x="35" y="11.538461538490488" style="opacity: 1;">SPICE</text></g>

And the problem is that this text is unselectable, through pointer changes on text hovering.
So how to make this text element selectable by mouse?
If it makes sense - whole svg picture is here - you can see word SPICE on the top left, it's unselectable, I suppose text on the background prevents current text selection:


A: I have no problem selecting this text, but the location of the g is probably inside a translated g.
Do you have some kind of overlay on the graph?
Make a very simple example like this.


<svg width="200" height="200">
<g><text id="tooltip" font-family="sans-serif" font-size="20px" fill="red" x="35" y="11.538461538490488" style="opacity: 1;">SPICE</text></g>
</svg>


