Você pode fornecer ajuda de bloco na forma de dicas e um URL de ajuda.
Dicas
As dicas oferecem ajuda instantânea quando o usuário passa o cursor sobre o bloco. Se o texto for longo, ele será quebrado automaticamente.
JSON
{
// ...,
"tooltip": "Tooltip text."
}
JavaScript
init: function() {
this.setTooltip("Tooltip text.");
}
Na API JavaScript, as dicas também podem ser definidas como uma função em vez de uma
string estática. Isso permite ajuda dinâmica. Consulte math_arithmetic
para conferir um
exemplo de dica que muda dependendo da opção do menu suspenso
escolhida.
JavaScript
Blockly.Blocks['math_arithmetic'] = {
init: function() {
// ...
// Assign 'this' to a variable for use in the tooltip closure below.
var thisBlock = this;
this.setTooltip(function() {
var mode = thisBlock.getFieldValue('OP');
var TOOLTIPS = {
'ADD': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_ADD'],
'MINUS': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MINUS'],
'MULTIPLY': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MULTIPLY'],
'DIVIDE': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_DIVIDE'],
'POWER': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_POWER']
};
return TOOLTIPS[mode];
});
}
};
Usando a API JavaScript, os blocos podem especificar uma função, em vez de uma string
estática, que retorna a string da dica. Isso permite dicas dinâmicas.
Consulte math_arithmetic
para conferir um exemplo.
Personalização
Também é possível personalizar a aparência das dicas de ferramentas fornecendo uma função de renderização personalizada. Crie uma função que aceite dois parâmetros:
- Primeiro, um elemento
<div>
em que você vai renderizar o conteúdo - Em segundo lugar, o elemento real sobre o qual o mouse está passando e para o qual você vai mostrar a dica
No corpo da função, você pode renderizar qualquer conteúdo que quiser no
div. Para receber a string de dica definida no bloco sobre o qual o mouse está passando, chame
Blockly.Tooltip.getTooltipOfObject(element);
, em que element
é o
segundo parâmetro acima.
Por fim, registre essa função para que o Blockly possa chamá-la no momento certo:
Blockly.Tooltip.setCustomTooltip(yourFnHere);
Para conferir um exemplo, consulte a demonstração de dicas personalizadas.
URL da ajuda
Os blocos podem ter uma página de ajuda associada. Para acessar essa informação, os usuários podem
clicar com o botão direito do mouse no bloco e selecionar "Help" no menu de contexto. Se esse
valor for null
, o item "Help" não será mostrado.
JSON
{
// ...,
"helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}
JavaScript
init: function() {
// ...
this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}
Usando a API JavaScript, os blocos podem especificar uma função, em vez de uma string estática, que retorna uma string de URL, permitindo ajuda dinâmica.