0

I'm working on having a mouseover effect that displays text and data. I figured out how to append HTML to a div like this:

  .on("mouseover", function(d) {
        d3.select(this)

        var string = "<p><strong>~Text</strong>: </p>";
        string += "<p><strong>Text</strong>: </p>";

        d3.select("#textbox")
          .html("")
          .append("text")
          .html(string)

But how to append the HTML to a position like the corner of the SVG without using a div?

rainbowunicorn
  • 103
  • 12
  • There are numerous existing tooltip plugins for d3 so you don't need to reinvent the wheel -- e.g. [d3-tip](https://github.com/Caged/d3-tip) – i alarmed alien Oct 19 '18 at 02:31
  • See also https://stackoverflow.com/questions/10643426/how-to-add-a-tooltip-to-an-svg-graphic?rq=1 – i alarmed alien Oct 19 '18 at 09:16
  • I’m using D3-tip already to display a smaller set of data near the cursor. But I want to have a larger text box anchored to a specific section of the D3 and not following the cursor, if that makes sense. – rainbowunicorn Oct 19 '18 at 09:20
  • That makes perfect sense. You just need to set the position of your text container -- see https://stackoverflow.com/questions/17891454/centering-an-html-div-overlay-on-an-svg-chart?rq=1 for an example of entering an HTML element over an SVG. You can adjust the offset according to your preferences. – i alarmed alien Oct 19 '18 at 10:04

0 Answers0