Question

我创建了一个DrawContainer，我想添加一个带有工具提示的精灵，理想情况下是动态内容。不幸的是，工具提示根本没有出现。如何纠正以下代码？提前谢谢。

var r = this.getSurface().add({
    type: "rect", strokeStyle: "#9090f0", x: 10, y: 10, width: 40, height: 40
});
var tip = Ext.create('Ext.tip.ToolTip', {
    html: "Tooltip"
});
r.on("mouseover", function() {
    tip.show();
});

Answer 1

您可以尝试在绘图容器上使用spriteevents插件，就像这样

var tip = Ext.create('Ext.tip.ToolTip', {
    html: "Tooltip"
});

var s = Ext.create({
    xtype:     'draw',
    renderTo:  document.body,
    width:     400,
    height:    400,
    plugins:   ['spriteevents'],
    sprites:   [
        {
            type:        "rect",
            strokeStyle: "#9090f0",
            x:           10,
            y:           10,
            width:       100,
            height:      100
        }
    ],
    listeners: {
        spritemouseover: function (item, event) {
            tip.show();
        },
        spritemouseout:  function (item, event) {
            tip.hide()
        }
    }
});

添加工具提示以绘制容器精灵

1 个答案: