Member Avatar for heading

hi

can someone help me get the popup like ask.com has on mouse over the binocular image. I want the html taken from database to be loaded in the popup instead of image. this popup should not be a popup window.

Thanks

  • 2 Contributors
  • 2 Replies
  • 83 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by heading

Dani AI

Generated

asked for the Ask.com-style hover preview and correctly pointed to using a positioned DIV. Practical checklist before implementation: load the HTML for the preview with AJAX, sanitize it on the client or server to prevent XSS, cache results to avoid repeated DB hits, position the DIV with getBoundingClientRect so it does not overflow the viewport, and provide keyboard and touch fallbacks (show on focus/click, not just hover).

Example pattern (minimal):

const icon = document.querySelector('.preview-icon');
const popup = document.getElementById('preview-popup');
const cache = new Map();

icon.addEventListener('mouseenter', async () => {
  const id = icon.dataset.id;
  if (!cache.has(id)) {
    const html = await fetch('/preview?id=' + encodeURIComponent(id)).then(r => r.text());
    const clean = DOMPurify.sanitize(html); // include DOMPurify separately
    cache.set(id, clean);
  }
  popup.innerHTML = cache.get(id);
  positionPopup(icon, popup);
  popup.style.display = 'block';
});

icon.addEventListener('mouseleave', () => { setTimeout(() => { if (!popup.matches(':hover')) popup.style.display = 'none'; }, 150); });

function positionPopup(anchor, p) {
  const r = anchor.getBoundingClientRect();
  p.style.left = (r.right + window.scrollX) + 'px';
  p.style.top = (r.top + window.scrollY) + 'px';
}

Notes and troubleshooting: sanitize untrusted HTML (see DOMPurify); use the Fetch API for requests (Fetch API); handle CORS if your preview endpoint is cross-origin; on touch devices switch hover to tap; add ARIA (aria-expanded/aria-controls or role="tooltip") and keyboard handlers to keep it accessible; debounce or prefetch to reduce latency.

Recommended Answers

All 2 Replies

Member Avatar for tgreer

Use a DIV, with the appropriate styles applied and then toggled. My personal webpages demonstrate this, and you're welcome to view source to learn how to do this.

For example, go to my Articles Page, and click on any article. Once you have a technical article displayed, click on the logo/header section. A movable div "popup" appears.

Member Avatar for heading

thanks tgreer that's a big help

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.