Show a multi-line tooltip in an onfocus subform above a specific field.

[kknm]

Tried:
In the user code of the form itself (the source for the subform), the nuSetToolTip() function only works in edit-mode.
On the main form, when working in a subform, the tooltip is not shown.
Help!

[kev1n]

Is the tooltip text dynamic or the same for all subform rows?

[kknm]

The text for all rows in a particular column is the same. If you apply the CSS attribute title='text', then the tooltip is displayed! But... in one line.
How to make a multiline tooltip?

[kev1n]

The standard HTML title attribute is designed for simple, single-line tooltips. While some browsers might render line breaks (&#10; or <br/>) within the title tooltip, this behavior is inconsistent and not a reliable solution.
In other words, it not a nuBuilder limitation and you will have to search for other solutions (such as 3rd party libraries: tippy etc.)

[kknm]

Thank you for participating!
I had to tinker with the number of spaces in each line

tooltip.jpg

[kknm]

Unfortunately, this does not work correctly in all browsers. It is preferable to use the nuMessage() function in user code, because HTML tags can be used, but the message appears at the top of the browser page. This is built into nubuilder4.css.

How to change the position of a message on the fly in the user code of the calling window?

[kev1n]

nuMessage() returns a jQuery object that can be manipulated.
For example, placing this code in an onfocus event will display a message just above the focused element:

Code: Select all

const msgDiv = nuMessage('hello');
const position = $(this).offset();
const msgHeight = msgDiv.outerHeight(true);
msgDiv.css({
    left: position.left + 'px'
    , top: (position.top - msgHeight - 20) + 'px'
});

Then you can also change the style and so on, according to your own preferences.

[kknm]

Thank you very much for the beautiful solution!!!
)

[kknm]

I was happy early...
If the tooltip was displayed differently in different browsers, then nuMessage with changed parameters either does not appear at all, or there is no binding to the parent form and z-index does not allow you to see it( Chrome).

Works beautifully only in slimjet.

tool_1.png

[kev1n]

I tested it in Chrome and it worked fine.
Can youvgive more details where you tested it?
Did you already try to change the z-index (if that is the only issue)?