@blockly/block-extension-tooltip

@blockly/block-extension-tooltip

A Blockly block extension that adds support for custom tooltip rendering.

WARNING: This plugin is deprecated. It is not compatible with recent versions of Blockly (v7.20211209.0 or above). As of Blockly v8, this plugin is no longer necessary as Blockly supports custom tooltip rendering. For an example, see the custom tooltip demo. Please uninstall this plugin and update Blockly to v8 or above. This plugin may be removed in the future.

Note:

• This plugin uses a block extension and as a result, it needs to be added to each block type. See test/index.ts
• This plugin is monkeypatching Blockly. It is not guaranteed to continue to function.

Installation

Yarn

yarn add @blockly/block-extension-tooltip

npm

npm install @blockly/block-extension-tooltip --save

Usage

Register

Register the tooltip extension:

import * as Blockly from 'blockly';
import {registerTooltipExtension} from '@blockly/block-extension-tooltip';

registerTooltipExtension((block) => {
  // Custom tooltip rendering method.
  const el = document.createElement('div');
  el.className = 'my-custom-tooltip';
  el.textContent = block.getTooltip();
  return el;
}, 'custom-tooltip-extension');

Block definition

Add the extension to your block definition using JSON:

Blockly.defineBlocksWithJsonArray([
  {
    "type": "my-block",
    "extensions": ["custom-tooltip-extension"]
  }
]);

or add the extension to your block definition using JavaScript:

Blockly.Blocks['my-block'] = {
  init: function() {
    Blockly.Extensions.apply('custom-tooltip-extension', this, false);
  },
};

License

Apache 2.0