@blockly/block-extension-tooltip

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

Usage no npm install needed!

<script type="module">
  import blocklyBlockExtensionTooltip from 'https://cdn.skypack.dev/@blockly/block-extension-tooltip';
</script>

README

@blockly/block-extension-tooltip Built on Blockly

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

WARNING: This plugin is currently incompatible with the latest version of Blockly (v7.20211209.0). Please comment on https://github.com/google/blockly-samples/issues/899 if this is blocking you (we also welcome contributions).

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 until we can make the correct change in core

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