javascript - Canvas tooltip to appear outside canvas?

Question

I have made the following using KineticJS and D3.js. I have used KineticJS to let me popup tooltips when the user hovers over one of the dots. However, the tooltip appears cut off because of the boundaries of the canvas. Is there a way I can make this appear without it getting clipped?

The entire code itself is pretty huge and contains a lot of unrelated stuff so I posted the relevant snippets:

    this.stage = new Kinetic.Stage({
        container: 'canvas',
        width: this.WIDTH,
        height: this.HEIGHT
    });

    this.circlesLayer = new Kinetic.Layer();
    this.tooltipLayer = new Kinetic.Layer();

    this.stage.reset();
    this.stage.clear();

    // Some d3 specific code
    this.xRange.domain([
        d3.min(this.data, function(d) {
        return d.x;
    }), d3.max(this.data, function(d) {
        return d.x;
    })]);

    this.yRange.domain([
        d3.min(this.data, function(d) {
        return d.y;
    }), d3.max(this.data, function(d) {
        return d.y;
    })]);

    var axes_transition = d3.select("#" + this.div).transition().duration(1000).ease("exp-in-out")

    // transition the axes
    axes_transition.select(".x.axis").call(this.xAxis);

    // Drawing the circles
    this.last = this.data.map(this.position);
    this.last.forEach(this.kineticCircle);

    // Setting up the tooltip
    this.tooltip = new Kinetic.Text({
      text: "",
      fontFamily: "Calibri",
      fontSize: 12,
      padding: 5,
      visible: false,
      fill: "black",
      //alpha: 0.75,
      textFill: "white"
    });

    this.tooltipLayer.add(this.tooltip);

    this.stage.add(this.circlesLayer);
    this.stage.add(this.tooltipLayer);

Answer 1

不幸的是，如果工具提示是在画布中绘制的，则不会。您当然可以使用 html 创建工具提示，或者改用画布上的 title 属性。