Anda dapat memberikan bantuan pemblokiran dalam bentuk tooltip dan URL bantuan.
Tooltip
Tooltip menawarkan bantuan instan saat pengguna mengarahkan kursor ke blok. Jika panjang, teks akan digabungkan secara otomatis.
JSON
{
// ...,
"tooltip": "Tooltip text."
}
JavaScript
init: function() {
this.setTooltip("Tooltip text.");
}
Di JavaScript API, tooltip juga dapat ditentukan sebagai fungsi, bukan
string statis. Hal ini memungkinkan bantuan dinamis. Lihat math_arithmetic
untuk
contoh tooltip yang berubah bergantung pada opsi dropdown yang telah
dipilih.
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];
});
}
};
Dengan menggunakan JavaScript API, blok dapat menentukan fungsi, bukan string statis, yang menampilkan string tooltip. Hal ini memungkinkan tooltip dinamis.
Lihat math_arithmetic
sebagai contoh.
Penyesuaian
Anda juga dapat menyesuaikan tampilan tooltip dengan menyediakan fungsi rendering kustom. Buat fungsi yang menerima dua parameter:
- pertama, elemen
<div>
tempat Anda akan merender konten - kedua, elemen sebenarnya yang diarahkan kursor mouse dan yang akan menampilkan tooltip untuknya
Dalam isi fungsi, Anda dapat merender konten apa pun yang Anda sukai ke dalam
div. Untuk mendapatkan string tooltip yang ditentukan pada blok yang diarahkan mouse, Anda dapat
memanggil Blockly.Tooltip.getTooltipOfObject(element);
dengan element
adalah
parameter kedua di atas.
Terakhir, daftarkan fungsi ini agar Blockly dapat memanggilnya pada waktu yang tepat:
Blockly.Tooltip.setCustomTooltip(yourFnHere);
Sebagai contoh, lihat Demo Tooltip Kustom.
URL Bantuan
Blok dapat memiliki halaman bantuan yang terkait dengannya. Fitur ini tersedia bagi pengguna dengan
mengklik kanan blok dan memilih "Bantuan" dari menu konteks. Jika nilai ini
null
, item "Bantuan" tidak akan ditampilkan.
JSON
{
// ...,
"helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}
JavaScript
init: function() {
// ...
this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}
Dengan menggunakan JavaScript API, blok dapat menentukan fungsi, bukan string statis, yang menampilkan string URL, sehingga memungkinkan bantuan dinamis.