Page 1 of 2
Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Tue Mar 05, 2024 9:50 am
by 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!
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Tue Mar 05, 2024 11:09 am
by kev1n
Is the tooltip text dynamic or the same for all subform rows?
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Tue Mar 05, 2024 11:55 am
by 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?
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Tue Mar 05, 2024 2:33 pm
by kev1n
The standard HTML title attribute is designed for simple, single-line tooltips. While some browsers might render line breaks ( 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.)
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Tue Mar 05, 2024 3:25 pm
by kknm
Thank you for participating!
I had to tinker with the number of spaces in each line
tooltip.jpg
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Wed Mar 06, 2024 11:43 am
by 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?
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Wed Mar 06, 2024 11:59 am
by 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.
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Wed Mar 06, 2024 12:17 pm
by kknm
Thank you very much for the beautiful solution!!!
)
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Thu Mar 07, 2024 6:23 am
by 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
Re: Show a multi-line tooltip in an onfocus subform above a specific field.
Posted: Thu Mar 07, 2024 6:26 am
by 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)?