feat(ui): display entity hint on mouse hover

[grafalex82]

Some devices may expose quite a lot of items. If these items are supplied with a description, the interface may get cluttered. If the description has certain amount of text describing values of the field, the interface gets too busy.

The idea of the proposed change is to have a hint field in addition to the description field in the device definition. The description may be used for a short 1-line description of the entity, while the hint may include big amount of text describing entity values or more detailed description of the setting. The hint text is not visible by default, but is shown in a hint/bubble when mouse is over the element.

This is a UI part of the change, it comes with this change in the herdsman converters, adding support for Hint field. Here is the usage:

    const relay_mode_description = "Mode of the internal relay switch";
    const relay_mode_hint = `The mode of the internal relay switch:
	unlinked - relay decoupled, button triggers only logical actions.
	front - relay toggles on initial press for immediate response.
	single - relay toggles on one press, generates 'single' action.
	double - relay toggles on two presses, generates 'double' action.
	triple - relay toggles on three presses, generates 'triple' action.
	long - relay toggles on press-and-hold, generates 'hold' action, and 'release' action upon button release`;
    sw.withFeature(e.enum('relay_mode', ea.ALL, relayModeValues)
        .withDescription(relay_mode_description)
        .withHint(relay_mode_hint));

[nurikk]

I don't like this approach, using hover will even more reduce ux for mobile users. We should trim this text instead of adding yet another hint, this will also require a lot of work on translation side

[grafalex82]

On mobile devices hint may be shown by clicking on the parameter name or description.

If you trim the text it may look ugly - pretty much every parameter description will be trimmed in the middle of the sentence. Moreover you will still have to provide the user a way to un-trim the text by clicking on the text, and expanding the parameter box.