CODEWITHSUNDEEP
javascriptextjs
Greg
Greg

Reputation: 147

Add a tooltip to draw container sprite

I have created a DrawContainer and I want to add a sprite with a tooltip to it, ideally with dynamic content. Unfortunately, the tooltip does not appear at all. How can the code below be corrected? Thanks in advance.

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

Upvotes: 1

Views: 594

Answers (1)

Gašper
Gašper

Reputation: 815

You could try using spriteevents plugin on the draw container, like so

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

Upvotes: 1

Related Questions