Tooltip in PIXIJS

[renathy]

I need tooltip (over Sprite) functionality.
Should I try to create my own way of doing this  or there already exists something to use (some library or example how to do this)?

This is my first project in PIXI...  I am using Latest version avaialable on website.

[ivan.popelyshev]

Looking at https://github.com/pixijs/pixi.js/wiki/v5-Resources ... there's https://github.com/pixijs/pixi-ui in the list but im not sure if it has tooltips.

[DungeonDame]

You can do it quite easily yourself. I added tooltips for buttons in a game I'm working on. I'll include part of the code so you can get an idea of what it entails (the initPos function might be helpful), although you won't be able to copy this directly as I'm using some of my own classes and stuff. The tooltip background is made up of a top, middle, and bottom image, and the middle just stretches to the height of the text. There's also a shadow. You would probably want to do it without using any textures though.

 

class EntitySharedUiBtnTooltip extends Entity
{
    /**
     * @param {ExtraText} data.text.main
     */
    constructor(data)
    {
        super();


        // Text
        this.text =
        {
            main: data.text.main,
        };


        // Entity
        var texture = Asset.TEXTURE.shared.ui;

        this.entity =
        {
            text: null,

            bg:
            {
                t: new Entity({texture: texture, frame: this.c().TF.t}),
                mid: new Entity({texture: texture, frame: this.c().TF.mid}),
                b: new Entity({texture: texture, frame: this.c().TF.b}),

                shadow:
                {
                    t: new Entity({texture: texture, frame: this.c().TF.shadow.t}),
                    mid: new Entity({texture: texture, frame: this.c().TF.shadow.mid}),
                    b: new Entity({texture: texture, frame: this.c().TF.shadow.b}),
                },
            },
        };


        // Con
        this.con.shadow = new Container();
        this.con.shadow.addChild(this.entity.bg.shadow.t.con.main);
        this.con.shadow.addChild(this.entity.bg.shadow.mid.con.main);
        this.con.shadow.addChild(this.entity.bg.shadow.b.con.main);

        this.con.main.addChild(this.con.shadow);
        this.con.main.addChild(this.entity.bg.t.con.main);
        this.con.main.addChild(this.entity.bg.mid.con.main);
        this.con.main.addChild(this.entity.bg.b.con.main);


        // Color
        this.entity.bg.shadow.t.sprite.tint = this.c().COLOR.shadow.color.hex;
        this.entity.bg.shadow.mid.sprite.tint = this.c().COLOR.shadow.color.hex;
        this.entity.bg.shadow.b.sprite.tint = this.c().COLOR.shadow.color.hex;

        this.con.shadow.alpha = this.c().COLOR.shadow.alpha;


        // Filter
        this.con.main.filters =
        [
            new AlphaFilter(0)
        ];
    }

    /**
     *
     */
    init()
    {
        this.initEntitySharedText();
        this.initPos();
    }

    /**
     *
     */
    initEntitySharedText()
    {
        this.entity.text =
            new EntitySharedText
            ({
                text: this.text.main,
                style: this.c().STYLE.create(),
                w: this.c().POS.text.w,
                tooltip: this,
            });

        this.con.main.addChild(this.entity.text.con.main);
    }

    /**
     *
     */
    initPos()
    {
        var pos = this.c().POS;


        // Text
        this.entity.text.con.main.x = ((pos.w - pos.text.w) / 2);
        this.entity.text.con.main.y = pos.bg.t;

        // Middle
        this.entity.bg.mid.con.main.y = pos.bg.t;
        this.entity.bg.mid.con.main.height = this.entity.text.obj.height;

        this.entity.bg.shadow.mid.con.main.y = pos.bg.t;
        this.entity.bg.shadow.mid.con.main.height = this.entity.text.obj.height;

        // Bottom
        this.entity.bg.b.con.main.y = pos.bg.t + this.entity.text.obj.height;

        this.entity.bg.shadow.b.con.main.y = pos.bg.t + this.entity.text.obj.height;

        // Shadow Offset
        this.con.shadow.x = pos.shadow.os.x;
        this.con.shadow.y = pos.shadow.os.y;

        // Main
        this.con.main.y =
            -(
                pos.pad
                +
                pos.bg.b
                +
                this.entity.text.obj.height
                +
                pos.bg.t
            );
    }
}

 

Edited November 26, 2020 by DungeonDame