0

I've been setting up d3.js tooltips in a standard way:

  d3.select("body")
   .append("div")
   .attr("class", "tooltip")
   .style("visibility", "visible")
   .style("top", "100px")
   .style("left","50px")
   .text("my text");

With accompanying CSS:

 .tooltip{
     visibility: hidden;
     position: absolute;
     border: 1px solid #e3e3e3;
     padding: 2px;
     background:#e3e3e3;
     pointer-events: none;
     font-size: 1em;
     color: #999999;
     width: 35px;
     height: 14px;
 }

The frontend member of my team tells me .style() doesn't work in IE and to replace it with .attr().

This is causing a problem with my tooltips - I'm guessing because it clashes with the CSS.

I'm wondering if anyone has any solutions?

Bmil
  • 362
  • 2
  • 13
  • IE 11 to be precise. – Bmil Oct 04 '17 at 18:23
  • I'm thought maybe I could use .attr("transform","translate(50,100)") but couldn't get that to work either.. Another CSS clash? – Bmil Oct 04 '17 at 18:24
  • I've just read somewhere that when you are using .element.style("example","result"), result must be a string. Hoping this will solve this? – Bmil Oct 04 '17 at 18:54
  • Been using d3 in IE for a while without problem with the `.style` method (but I do mostly svg). I found [this](https://stackoverflow.com/questions/21648787/css-does-not-load-in-internet-explorer), that suggests to rename the stylesheet without the word *style* in the file name, and got it working in Edge. PS: I feel for you to have to work in IE... – Hugues Stefanski Oct 04 '17 at 20:02

0 Answers0