setting custom tooltip not working

[laxmi...@gmail.com]

Hello friends,

I was planning to use custom tooltip function in my code. It's an angular based app with latest blockly integration via npm. Here is the custom tooltip function that i copied from samples:

initTooltips() {
        const customTooltip = function (div, element) {
            if (element instanceof Blockly.BlockSvg) {
                div.style.backgroundColor = element.getColour();
            }
            const tip = Blockly.Tooltip.getTooltipOfObject(element);
            const text = document.createElement('div');
            text.textContent = tip;
            const container = document.createElement('div');
            container.style.display = 'flex';
            if (element.type == 'ShowTableBlock') {
                const img = document.createElement('img');
                img.setAttribute('src', "ShowTable.gif");
                container.appendChild(img);
            }
            container.appendChild(text);
            div.appendChild(container);
        };
        // Register the function in the Blockly.Tooltip so that Blockly calls it
        // when needed.
        Blockly.Tooltip.setCustomTooltip(customTooltip);
    }

Here is how I am adding it:

createBlocklyWorkspace() {
        this.workspace = Blockly.inject('blocklyDiv', this.defaultOptions);
       
        const workspaceSearch = new WorkspaceSearch(this.workspace);
        workspaceSearch.init();
        workspaceSearch.open();

        const backpack = new Backpack(this.workspace);
        backpack.init();
        this.initTooltips();
    }

Somehow the customtooltip function is not getting hit, Any suggestions what I might be missing?

[Christopher Allen]

Hello friend,

I was planning to use custom tooltip function in my code. It's an angular based app with latest blockly integration via npm.

Somehow the customtooltip function is not getting hit, Any suggestions what I might be missing? 

The first thing I would check is that initTooltips is actually being called.  From your sample it appears that they're both methods on the same class/object, so it looks like it should work—but it's definitely worth checking!:

  initTooltips() {
    const customTooltip = function (div, element) {

      // ...

    };
    // Register the function in the Blockly.Tooltip so that Blockly calls it
    // when needed.
    Blockly.Tooltip.setCustomTooltip(customTooltip);
  }

  createBlocklyWorkspace() {
    this.workspace = Blockly.inject('blocklyDiv', this.defaultOptions);

    // ...
    this.initTooltips();
  }

The call to setCustomTooltip appears to be correct, so I don't think that's the issue.

Is it possible that customTooltip is actually being called but not not doing what you want it to?  Perhaps the test

    if (element.type == 'ShowTableBlock') {

is inadvertently preventing your custom code from being run?

I'd try adding a console.log call (or setting a breakpoint) to check whether customTooltip really isn't being called.

If setCustomTootip is being called, but customTooltip isn't, then that seems like a bug in Blockly and we'd really appreciate a bug report with a minimal reproduction.

Christopher

[laxmi...@gmail.com]

Hi Christopher,

This works fine, there was a problem how I was trying to access the image. I should have checked the console logs more carefully. It works beautifully now!

Thanks,

Lax