Defining CSS style for tooltip in d3.js body

问题

I'm wondering if its possible to define a CSS style for a tooltip function displayed by d3.js on mouse over event in the actual body of the definition rather than on top of the page in the style section.

JAVASCRIPT:

    var tooltip = d3.select("#scatter-load").append("div")
        .attr("class", "tooltip")
        //.attr("position", "absolute")
        //.attr("width", "200px")
        //.attr("height", "30px")
        //.attr("pointer-events", "none")
        .style("opacity", 0);

chocolateGroup.append("circle")
    .attr("r", function(d) {return rScale(d.size);})
    .attr("opacity", 0.7)
    .style("fill", "steelblue")
    .on("mouseover", function(d) {
      tooltip.transition()
           .duration(200)
           .style("opacity", .9)
      tooltip.html(d.manufacturer + "<br/> (" + xValue(d) 
        + ", " + yValue(d) + ")")
           .style("left", (d3.event.pageX + 5) + "px")
           .style("top", (d3.event.pageY - 28) + "px");
  })
  .on("mouseout", function(d) {
      tooltip.transition()
           .duration(500)
           .style("opacity", 0);
  });

CSS:

.tooltip {
    position: absolute;
    width: 200px;
    height: 28px;
    pointer-events: none;

What I am looking for is something similar to this style where CSS styling is defined when object is created (for example fill):

svg.append("path")
      .datum(data)
      .attr("d", area)
      .attr("fill", "steelblue");

回答1:

You should be using style to set CSS style like this:

.attr("class", "tooltip")
        .style("position", "absolute")
        .style("width", "200px")
        .style("height", "30px")
        .style("pointer-events", "none")
        .style("opacity", 0);

来源：https://stackoverflow.com/questions/35978614/defining-css-style-for-tooltip-in-d3-js-body