画布工具提示出现在画布外面？ [英] Canvas tooltip to appear outside canvas?

问题描述

我使用KineticJS和D3.js做了以下。我使用KineticJS让我弹出工具提示，当用户悬停在一个点。但是，由于画布的边界，工具提示显示为剪切。有没有办法，我可以让这个出现没有它被剪裁？

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

推荐答案

如果工具提示不能在画布上绘制，你当然可以用html创建工具提示，或者使用canvas上的title属性。

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.

这篇关于画布工具提示出现在画布外面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！