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);

Florafloral

You can't draw outside of the canvas element of course – Mandrel

May I ask why you are using both KineticJS and d3.js? Aren't they both visualization features, but geared toward different applications? – Bohemia

@AndrewMao: Yes they are. However, d3.js starts to stumble if the number of graphic elements to be rendered is more than 2000 (e.g., svg circles). This is where KineticJS kicks in. I was able to successfully render more than 100K circles without any problems. I can directly use KineticJS but d3 provides a lot of cool data manipulating functions. – Florafloral

Could you clarify further? Are you using d3 to manipulate/define the data and KineticJS to draw it? If so, is there a library that hooks the two together, or something you cooked up yourself? I have posted a similar question about this here, maybe you can help: #12310524 – Bohemia

Answer 1

Not if the tooltip is drawn in the canvas unfortunately. You could of course create the tooltip with html or use the title attribute on the canvas instead.

Skewness

+1 Thank you! I just solved by increasing the size of the canvas. Could you elaborate on how I can solve this using the title attribute of the canvas? Do you mean to say I need to use the title attribute for all the circles? – Florafloral

Yes, all circles use the title attribute of the canvas element. When you roll over a circle in the canvas you set the title attribute (with jQuery's .attr() for instance) and when you roll out you remove it (with jQuery's .removeAttr() for instance). It's not optimal (you can't style it etc.) but it works. – Skewness