Configurable hint/help appearance

[avernet]

NOTE: Hint/help on items has been moved to #1311.

Requirements

Currently, controls can have help and hint messages:

• When the control has a help message, a question mark icon shows to the left of the label, and when clicked a dialog shows with the help message.
• When the control has a hint message, that message can either show in a yellow YUI tooltip on mouse over, or as text under the control.

We will:

1. New appearances for help/hint – We will keep the text under control and placeholder appearances, get rid of the dialog and YUI tooltip, and add a new tooltip based on the Bootstrap tooltip, and add a new popover based on the Bootstrap popover. Unlike what is done by default with Bootstrap, the tooltip won't hide right away when the pointer is moved away from the label, but will stay visible if the pointer moves to the tooltip, to support links and text selection. So help/hint will have 3 possible appearances, with the possibility of adding more options in the future:

   • text under control
   • placeholder
   • tooltip
   • popover

   

   

   The tooltip and popover are shown on mouseover and focus. Focus has the priority over mouseover: if a control has the focus, its tooltip/popover are shown, wherever the mouse is.

   @avernet:

   • check if technique used to detect is mouse is over the popover works on IE7
   • check how the server tells the client how the placeholder hint changes; it should tell the client to change an attribute
   • hide help icon in Form Builder
   • localize new HTML editor in dialog
   • handle change of hint

   @ebruchez:

   • place default classes for appearances
   • properties to change default

2. Help/hint appearance configurable – We will make how the help and hint are shown configurable. This configuration will be doable:

   • at the XForms level:
     • globally (property)
     • on a per-form basis (attribute on the model)
     • with an appearance attribute on the xf:help/xf:hint
   • at the Form Runner level, for an app/form, with a Form Runner property

3. FB: improved HTML editing – Editing HTML in the label, hint, item message, and help will be improved. Like now, a text field or text area is shown, but it will get a new GitHub inspired icon on the top-right, which when clicked will show a larger editor.

   

Non-requirements

This RFE does not cover the following cases, not because they don't make sense but because implementing them would add a significant amount of complexity. This of course doesn't close the door to also supporting those use cases in the future.

• We won't have the ability for a popover to have a title (info, alert…) and corresponding icon.

Implementation

(This section will need to be expanded)

• the concept of help and the existing tooltips are removed from the client code
  • it only keeps the label and hint; all the tooltip are handled with HTML for the label or item produced by the server
  • in the code/CSS the current hint as in "text below the control" should be renamed as it is not tied to an xf:hint

[ebruchez]

Some doubt whether this will make it to 4.4.

[avernet]

Reverted 81fc29c which was done towards implementing this RFE as it was causing #1362. This means that when we get back to this, we'll need to revisit that code so it doesn't negatively impact the positioning of the top tooltips, such as they are used for the label editor checkbox.

[avernet]

We kept showing hints below labels by default, instead of using Bootstrap tooltips. We also didn't make the appearance configurable for Form Runner; hints show as text under the control, and help as Bootstrap popover; for now we haven't felt that adding such a level of complexity was needed, but we can always revisit this if needed. Created a separate issue to improve the way we edit HTML labels and hints (#1525).