Member Avatar for Taffd

Greetings all,
I'm in the process of writing my own forums. I'd like to insert a 'teaser', showing a few lines of a post, displayed when a user rolls over a thread link. Much the same as happens here on daniweb.
Can somebody please explain how this is done.
Thanks, in advance
Taffd

  • 3 Contributors
  • 3 Replies
  • 107 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Taffd

Dani AI

Generated

Good, simple suggestions from and . For a production forum the useful pattern is: generate a short, sanitized preview on the server, avoid embedding one hidden DIV per thread, and use a single floating tooltip element updated by client-side code (event delegation + lazy load). That keeps the DOM small, avoids flicker, and makes positioning and accessibility easier.

A compact client-side pattern (one tooltip node, event delegation, optional AJAX fetch):

const tooltip = document.createElement('div');
tooltip.id = 'teaser-tooltip';
tooltip.className = 'teaser-tooltip';
tooltip.setAttribute('role', 'tooltip');
tooltip.style.display = 'none';
document.body.appendChild(tooltip);

let hideTimer;

document.addEventListener('mouseover', e => {
  const link = e.target.closest('.thread-link');
  if (!link) return;
  clearTimeout(hideTimer);
  const preview = link.dataset.preview;
  if (preview) {
    tooltip.innerHTML = preview; // preview must be pre-sanitized
    tooltip.style.display = 'block';
    const r = link.getBoundingClientRect();
    tooltip.style.left = (window.scrollX + r.right + 8) + 'px';
    tooltip.style.top  = (window.scrollY + r.top) + 'px';
    link.setAttribute('aria-describedby', tooltip.id);
  } else {
    // optional: fetch('/preview.php?id=' + link.dataset.id) and fill tooltip
  }
});

document.addEventListener('mouseout', e => {
  const link = e.target.closest('.thread-link');
  if (!link) return;
  hideTimer = setTimeout(() => { tooltip.style.display = 'none'; }, 150);
});

Server-side: trim and sanitize the snippet and escape it before output. Example PHP helper:

function make_preview($post_html, $max = 200) {
  $plain = strip_tags($post_html);
  $plain = html_entity_decode($plain, ENT_QUOTES, 'UTF-8');
  $plain = preg_replace('/\s+/', ' ', trim($plain));
  if (mb_strlen($plain) > $max) {
    $plain = mb_substr($plain, 0, $max - 1, 'UTF-8');
    $plain = preg_replace('/\s+\S*$/u', '', $plain);
    $plain .= '...';
  }
  return htmlspecialchars($plain, ENT_QUOTES, 'UTF-8');
}

Key notes: if you allow HTML in previews, use a library like HTMLPurifier for sanitization; add keyboard focus handling and role/aria-describedby for accessibility; on touch use tap/click fallback; avoid rendering thousands of hidden nodes by using one floating tooltip and lazy fetch. References: WAI-ARIA tooltip pattern (WAI-ARIA APG), and PHP docs for strip_tags and htmlspecialchars (strip_tags, htmlspecialchars).

Recommended Answers

All 3 Replies

Member Avatar for scru

Use php to prepare the preview text and echo some javascript that will display the teaser.

My suggestion if you are as unskilled in javascript as I am, would be to first let php echo some invisible divs each next to the thread link which will have the preview inside them, and use the javascript to set them to visible when the user's mouse hovers. The divs should be absolutely positioned with css, and have a z-index higher than the close by elements, to ensure it hovers over them.

It's not what I would call ideal, but it's what I would do with my current skill level.

Member Avatar for ShawnCplus

It is done with the title attribute with the link

<a href="blah.com" title="This is blah" >blah</a>

Will show This is blah when hovering over the link

Member Avatar for Taffd

Thanks ShawnCplus,
Exactly what I needed. Thanks also to scru, for your input.
Regards
Taffd

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.