[Added] Help Icons (nuBuilder 4.9.x)

[admin]

Add small (help) icons next to form objects that have a nu-tooltip-icon attribute.
Hover shows a tooltip with your help/info text; you can also handle clicks, set different positions and use themes.

help_icon.png

Demo Page

Good for

• Quickly adding inline tooltips to e.g. inputs, textareas, and selects
• Keeping forms clean while still offering guidance

How it works

1. You add a nu-tooltip-icon attribute to any form object.
2. Optionally add nu-tooltip-position to override tooltip position per element.
3. icons appear automatically when the form loads - no JavaScript required!
4. An icon appears to the right; hover to see a custom tooltip with precise arrow positioning. (Click support is optional.)

object_attributes.png

Automatic initialisation
The system runs automatically when forms are loaded, so you typically don't need any JavaScript. Just add the attributes to your form fields and you're done!

Refreshing (dynamic forms)
If you add or remove fields later, call:

Code: Select all

nuAttachToolTip(); // to attach to any new fields
nuAttachToolTip.refresh(); // to reposition existing icons

What to put in nu-tooltip-icon

• Short, actionable guidance (HTML allowed).
• Keep it concise; the tooltip wraps at ~250px width.

Code: Select all

nu-tooltip-icon="<b>Username</b>: 4–20 chars, letters & digits only."

Styling notes

• Icon color defaults to #53a1c4. Override via CSS on .nuToolTipOverlay i.
• Tooltip is a lightweight custom element (.nuToolTip) with a dark theme; override with CSS.
• The overlay (.nuToolTipOverlay) and tooltip are created once per page.
• Tooltip arrows always point directly to the icon regardless of tooltip size or position.

Performance & behavior

• Icons automatically reposition on window scroll and resize.
• Each field is watched with ResizeObserver to keep alignment accurate.
• Changing nu-tooltip-icon or nu-tooltip-position updates the tooltip on next hover.
• Removing a field cleans up its observers and icon automatically.
• Tooltips are viewport-aware and adjust position to stay on screen while maintaining arrow alignment.

Override icon settings

In the form's Custom Code field:

Code: Select all

function nuOnToolTipIcon(element, settings) {
    // custom tooltip settings for object with element ID 'critical_input'
    if (element.id === 'critical_input') {
        settings.theme = 'red';
        settings.iconSize = 20;
        settings.gapRight = 12;
        settings.tooltipPosition = 'top';
        settings.animationDuration = 300;
        settings.iconClasses = 'fa-solid fa-exclamation-triangle';
        settings.onClick = function(el, text) {
            alert('Critical tooltip text: ' + text);
        };
    }
 };

Options

• gapRight: Pixels to place the icon to the right of the field. Default: 8.
• iconSize: Icon size in pixels. Default: 16.
• zIndex: Base stacking context for the overlay (tooltip is +1). Default: 50.
• iconClasses: Classes for the icon. Default: 'fa-solid fa-circle-question'.
• tooltipPosition: Default tooltip position for all elements. Can be overridden per element. Options: 'top', 'bottom', 'left', 'right'. Default: 'top'.
• onClick: Optional handler to run when the icon is clicked. Receives:
  • el: the field element
  • helpText: the text from nu-tooltip-icon

[kev1n]

You can now add HTML tooltips directly to objects using the attribute nu-tooltip.
This displays the tooltip on the object itself, without adding an extra icon.

Example:

Code: Select all

nu-tooltip="<b<Help<b> text for button"

Example: Setting a tooltip with options by code:

Code: Select all

nuSetAdvancedToolTip('run_user', {
    text: '<b>Dummy Tooltip</b><br><i>This is some HTML</i>',
    theme: 'blue'
});

In this shorthand form you can just pass the HTML string directly (but without the possibility to set other options)

Code: Select all

nuSetAdvancedToolTip('run_user', '<u>Tooltip Title</u><br><small>Some extra info here</small>');

[kev1n]

Note: This feature is still under development, and its implementation may change before the next release.

[kev1n]

Note: The feature currently under development has undergone the following changes:

Renamed Attributes

nu-help-icon-text → nu-tooltip-icon
nu-help-icon-position → nu-tooltip-position
nu-help-text → nu-tooltip

Renamed Functions

nuAttachHelpIconsToObjects() → nuAttachToolTip()
nuOnAddHelpIcon() → nuOnToolTipIcon()

Renamed CSS Classes

.nuHelpOverlay → .nuToolTipOverlay
.nuHelpToolTip → .nuToolTip