SQL in cell's mouse hovering

[capstefano]

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?

[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.

[capstefano]

Thanks! I'll try to build up something for that with your suggestions

[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.



In Custom Code / Browse field

Code: Select all

// 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.

Code: Select all

// 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:

Show CodeShow Code

Code: Select all

// 1. Retrieve mouse coords from Hash Cookies
$x = nuGetProperty('mouseX');  // :contentReference[oaicite:0]{index=0}
$y = nuGetProperty('mouseY');  // :contentReference[oaicite:1]{index=1}

// 2. Run your “random” query
$sql  = "SELECT t1, t2 FROM test_hover ORDER BY RAND() LIMIT 5";
$stmt = nuRunQuery($sql);       // :contentReference[oaicite:2]{index=2}

// 3. Build an HTML list
$html = '<ul class="random-popup">';
while($row = db_fetch_array($stmt)){  // :contentReference[oaicite:3]{index=3}
    $html .= "<li>"
           . htmlspecialchars($row['t1']) 
           . ": " 
           . htmlspecialchars($row['t2']) 
           . "</li>";
}
$html .= '</ul>';

// 4. Send back a JS call to render the popup
$js = "showRandomPopup(`{$html}`, {$x}, {$y});";
nuJavaScriptCallback($js);      // :contentReference[oaicite:4]{index=4}

[capstefano]

that's quite interesting, kevin! thank you very much. I'll implement this in the next version of my app