Hello.
As a user, I would find interesting a way to customize the hovering on cells/rows in browse forms.
Actually hovering on a cell shows the content of the cell itself and that's a good default behavior, but a way to show the result of a query, taking the value of the cell (or maybe the primary key of the row) as a #HASH_COOKIE#, would be great for the end-user experience, in my opinion.
Or maybe there's some way to obtain it with the existent functions?
Re: SQL in cell's mouse hovering
Posted: Tue Jun 24, 2025 12:36 pm
by kev1n
Hi,
In principle, you can use an event listener with mouseover, then call a nuBuilder procedure using nuRunPHPHidden() to fetch data from a table.
After that, you can display a popup using nuJavaScriptCallback().
If you’d like, I can put together a simple example.
Although, tools like ChatGPT should also be capable of generating a basic code framework for this.
Re: SQL in cell's mouse hovering
Posted: Tue Jun 24, 2025 4:03 pm
by capstefano
Thanks! I'll try to build up something for that with your suggestions
Re: SQL in cell's mouse hovering
Posted: Thu Jun 26, 2025 3:20 pm
by kev1n
The example below demonstrates how to display a custom hint when hovering over a cell in a Browse form.
When the cell is hovered over, a nuBuilder Procedure is triggered to retrieve the hint text.
The text is then passed back to JavaScript, which displays it as a hover hint.
The code is certainly not perfect, but it's meant to serve as an idea or starting point for implementing such a feature.
// 1. Popup renderer
function showRandomPopup(html, x, y) {
// Remove any existing popup first
document.querySelectorAll('.random-popup-container').forEach(el => el.remove());
const popup = document.createElement('div');
popup.className = 'random-popup-container';
popup.innerHTML = html;
Object.assign(popup.style, {
position: 'absolute',
left: `${x}px`,
top: `${y}px`,
background:'#fff',
border: '1px solid #ccc',
padding: '8px 12px',
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
zIndex: 99999,
transition:'opacity 0.2s',
opacity: 0
});
document.body.appendChild(popup);
// fade in
requestAnimationFrame(() => popup.style.opacity = '1');
// auto-remove after 4s (if still present)
setTimeout(() => {
popup.style.opacity = '0';
setTimeout(() => popup.remove(), 200);
}, 4000);
}
// 2. Handle the server callback
window.showRandomPopupCallback = function(html, x, y) {
showRandomPopup(html, x, y);
};
// 3. Delegate hover on .nuCell using bubbling mouseover/mouseout
var hoverTimer = null;
// 1. Hover‐in on a .nuCell (throttled + PHP call)
nuAddEventListenerOnce(
document.body,
'mouseover',
function (e) {
const cell = e.target.closest('.nuCell');
if (!cell) return;
if (cell.textContent.trim() === '') return;
cell.setAttribute('title', '');
// throttle rapid enters
clearTimeout(hoverTimer);
hoverTimer = setTimeout(() => {
// stash coords for PHP
nuSetProperty('mouseX', e.pageX);
nuSetProperty('mouseY', e.pageY);
// run the hidden procedure
nuRunPHPHidden('getRandomData');
}, 200);
},
{ passive: true },
'nu-mouseover-added'
);
// 2. Hover‐out on a .nuCell (remove popup)
nuAddEventListenerOnce(
document.body,
'mouseout',
function (e) {
if (!e.target.closest('.nuCell')) return;
clearTimeout(hoverTimer);
document
.querySelectorAll('.random-popup-container')
.forEach(el => el.remove());
},
{ passive: true },
'nu-mouseout-added'
);
Next, create a nuBuilder Procedure (e.g. "getRandomData") that will be called to retrieve the text displayed in the hover window.
In this example, some random text is returned purely for demonstration purposes.
// 1. Retrieve mouse coords from Hash Cookies
$x = nuGetProperty('mouseX');
$y = nuGetProperty('mouseY');
// 2. Define an array of random texts
$randomTexts = [
"Life is short, smile while you still have teeth.",
"404: Motivation not found.",
"Be a voice, not an echo.",
"Coffee first, schemes later.",
"Chaos is just misunderstood order."
];
// 3. Pick a random text
$randomText = $randomTexts[array_rand($randomTexts)];
// 4. Assign the text to $html, escaping it for safety
$html = htmlspecialchars($randomText);
// 5. Send back a JS call to render the popup
$js = "showRandomPopup(`{$html}`, {$x}, {$y});";
nuJavaScriptCallback($js);
And below is a basic skeleton of a Procedure that retrieves text from a table:
In Custom Code / Browse field