Added tooltip option to all nodes

[GerwinvBeek]

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Proposed changes

This proposal will open possibility to display custom tooltips to all nodes. This can be used to for example give a quick explanation about what the node does without having to open it.
Request came from our own users, so made this quick proposition. Would love to see it in Node-RED instead of use having to run a fork

Example:
In the custom node:

In NodeRED:

Checklist

• I have read the contribution guidelines
• For non-bugfix PRs, I have discussed this change on the forum/slack team.
• I have run grunt to verify the unit tests pass
• I have added suitable unit tests to cover the new/changed functionality

[coveralls]

Coverage: 68.556%. Remained the same when pulling a823c5a on GerwinvBeek:master into e5d579c on node-red:master.

[knolleary]

In principle, this looks good.

One downside is that each node would have to implement this function in order to do anything.

An alternative would be for us to just show this.info if it is set for any node - that would provide a more consistent user experience. But it does remove the flexibility for a node to be able to provide a completely custom tooltip - is that something you have a requirement for? Your example shows this.info, but do you have cases in mind where it is something else?

We could also do a hybrid approach

• if this.tooltip is defined, use that
• else if this.info is defined, show the first paragraph of that (as we do with the tooltip when you hover over the node in the palette) This must be the rendered markdown version, not the raw text

If the node has its label hidden, we currently show the node label as the tooltip. In this instance, I'd suggest prefixing the result of the above with what we'd show today, so that information is still readily available.

[GerwinvBeek]

I think in our situation we will use this.info for every node. This is an easy place for the user to place a description.
If that is prefered as the implementation instead of the tooltip property I can work with it!

I did try a implementation with the available popover (@node-red\editor-client\src\js\ui\common\popover.js). This did give me the ability to render markdown in the tooltip. However, it did complicate the code quite a bit. This might have to do with my lack of understanding the code. I still have a stash laying around I think, I could share it if you want to take a look at it?
I'd agree that rendering markdown is the prettier solution here!

I can definitely add the label to the beginning, that sounds like a good solution for when the label is hidden.

[knolleary]

Great - I think finding a solution that just works is always preferable to needing nodes to add properties.

As a heads up, we'll probably get 3.0-beta.3 released today with 3.0-final next Thursday. I won't hold up the beta for this PR, but would be good to get it in the next few days ahead of the final release.

[GerwinvBeek]

Edited the code so label is display at beginning and info property is used instead of tooltip:

[knolleary]

Thanks for this. I've got a couple concerns about the length of text this could display - and whether it should clip it at some sensible point.

Also, I think when the label is being shown as well, it ought to be on a line of its own if info is multiple lines.

I can also see that rendering it has markdown is non-trivial given the way we render it in the svg.

I'm going to hold off merging this for the imminent beta, but we can tidy up these last few points ahead of the final 3.0 release.

[GerwinvBeek]

Thank you, do I just leave this pullrequest open and you commit the last few changes?

[knolleary]

Yup - I will take it from here next week

[bonanitech]

I think it would also be nice if there was some sort of visual cue on the nodes that have information in their description.

[knolleary]

I have spent a bit more time on this, but it needs more work.

There are two issues:

• The node description can be very long. Putting it all into the tooltip would not be suitable as it would make the tooltip very big.
• Due to the way the tooltips inside the workspace are generated as SVG, we can't easily rely on normal HTML markup to achieve proper rendering - so there will be an inconsistency between how it appears in the info sidebar and in the tooltip.

For the first issue, I propose we identify a suitable limit to how much is displayed in the tooltip. In the Palette, we use the first paragraph of the node's help as the tooltip content. We could use something similar here - look for first newline, or first blank link (ie a paragraph break in markdown).

It'll also need some logic to layout the text as individual svg elements without relying on just the existing newlines in the text. That's a bunch of text layout logic that is needed.

So I'm still keen to do this, but there's more work needed to get it right. We will be doing a 3.0.0-beta.4 release this week - I doubt we have the bandwidth to get this in for that.

[dceejay]

Re length, yes agree first para should make sense. Could there be a link in the tooltip ? that opens up the sidebar to the correct full info page to show the rest ?