Tips in property dialog

Hi all,

I'm trying to create tips that will show as a field in the properties dialog gets focus. To get an idea of how to do this I have fleeced through the serial port code (both html and js) and although I can see where the <div> tags are that hold the tips, they have no actual content. I can also find how they are either shown or hidden in the oneditprepare function, but I cannot find where the actual content of the various tips is held.

I'm sure it's patently obvious and I'm just not seeing it, so a nudge in the right direction would be much appreciated.


It is possible that the text of the tips is held in a translation library. Try looking for lines that contain RED._

Alas, only found RED.log statements and error statements...

Do you have a link to the line of code in the serial node you are looking at? I'm not 100% clear on what you're trying to do here, but if you can point to an example you're trying to replicate, we can help explain how it's working.

The link to the github html file is

node-red-nodes/25-serial.html at master · node-red/node-red-nodes · GitHub

where in lines 220-226 you will see the hidden divs:

<div class="form-tips" id="tip-waitfor" hidden><span data-i18n="serial.tip.waitfor"></span></div>
<div class="form-tips" id="tip-addchar" hidden><span data-i18n="serial.tip.addchar"></span></div>
<div class="form-tips" id="tip-responsetimeout" hidden><span data-i18n="serial.tip.responsetimeout"></span></div>
<div class="form-tips" id="tip-split"><span data-i18n="serial.tip.split"></span></div>
<div class="form-tips" id="tip-timeout" hidden><span data-i18n="serial.tip.timeout"></span></div>
<div class="form-tips" id="tip-silent" hidden><span data-i18n="serial.tip.silent"></span></div>
<div class="form-tips" id="tip-count" hidden><span data-i18n="serial.tip.count"></span></div>

The oneditprepare: function() starting on line 257 contains in lines 329-334 one of the many references to these div IDs (there are others, but this block seems the cleanest):

$("#node-config-input-responsetimeout").on('focus', function () { $("#tip-responsetimeout").show(); });
$("#node-config-input-responsetimeout").on('blur', function () { $("#tip-responsetimeout").hide(); });
$("#node-config-input-waitfor").on('focus', function () { $("#tip-waitfor").show(); });
$("#node-config-input-waitfor").on('blur', function () { $("#tip-waitfor").hide(); });
$("#node-config-input-addchar").on('focus', function () { $("#tip-addchar").show(); });
$("#node-config-input-addchar").on('blur', function () { $("#tip-addchar").hide(); });

I am trying to replicate something similar. However as I look through the code I cannot find the actual contents of any of the tips that show when a field has focus - see the marked tips in the image below.

Each of those divs has a data-i18n attribute. This identifies the message that should be inserted into the div from the nodes message catalog.

If you dont want to use message catalogs (which would enable translations to be provided) you can just inline the message as you'd normally see.

I feared as much. I can't seem to find the message catalog you refer to though?

Don't know if getting up to speed on data-i18n is going to be worth my effort, but I'll look into it. What I'm most interested in is how the tips are styled (size, color, font etc). That way I could be at least stylistically consistent.

Thanks again,

The Serial node's message catalog is here: node-red-nodes/25-serial.json at master · node-red/node-red-nodes · GitHub

If all you want is consistent styling then set the class form-tips on the containing <div>.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.