Member Avatar for iwonder

Hi have you ever been to ?

ok now I`m not spamming or something..... I happened to visit their forum it showed a popup sort of ad in this . when u take mouse over the double lined green word a intellitxt ad pops up .

ok now I am asking this `cause i want to have that in my site but not for ads, for wikipedia . like if some difficult word is there, when we take mouse over the word it shows the synonym in pop up . Actually I saw this meaning pop-up thing in Trillian messenger :mrgreen:

So any help ?

  • 2 Contributors
  • 3 Replies
  • 121 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by DaveSW

Dani AI

Generated

wanted a Trillian-style hover that pulls Wikipedia content rather than a static tooltip; was right to flag that the visual reminds of Smart Tags, but that is a different mechanism. A practical, reliable solution is a targeted client-side lookup + caching model instead of trying to scan and annotate every word in the DOM.

Only mark the terms you want (add a class or data attribute) to avoid huge DOM churn. On mouseenter/focus, fetch a short summary from the Wikimedia REST endpoint, cache the result, and render a lightweight popover. Keep the popover accessible (show on focus, use aria attributes) and mobile-friendly (tap to open). Sanitize any HTML from the API or prefer extract/plain-text fields and inject via textContent to avoid XSS.

Minimal pattern (illustrative):

const cache = new Map();

async function getSummary(title){
  if (cache.has(title)) return cache.get(title);
  const res = await fetch('https://en.wikipedia.org/api/rest_v1/page/summary/' + encodeURIComponent(title));
  if (!res.ok) return null;
  const json = await res.json();
  const text = json.extract || json.description || null;
  cache.set(title, text);
  return text;
}

document.addEventListener('mouseover', async e => {
  const el = e.target.closest('.wikiterm');
  if (!el) return;
  const title = el.dataset.title || el.textContent.trim();
  const summary = await getSummary(title);
  if (summary) showTooltip(el, summary); // implement showTooltip to create accessible popover
});

Operational notes: debounce lookups, keep an LRU or localStorage cache to limit API calls, and always include a link back to the Wikipedia article for full context. Also respect reuse/licensing rules when surface text comes from Wikipedia; see the Wikimedia API docs and reuse/copyright guidance for attribution details (Wikipedia REST API and Wikipedia copyright).

Recommended Answers

All 3 Replies

Member Avatar for DaveSW

use the title attribute: <span title="explanation">difficult word</span>

Incidentally what you saw on the other site is probably a Microsoft Smart Tag - more pervasive advertising by them :rolleyes: http://www.alistapart.com/articles/smarttags/

Member Avatar for iwonder

Woo hoo ! I wasn`t talking about the tags m8 , it`s wiki , i wanted something which pops up the meaning from the server .
U`ll know what i`m talking if u use Trillian 3

Member Avatar for DaveSW

I don't use trillian3.
the popup thing with a double green underline sounds like the ms smart tag. because that's exactly what one looks like..

So you want a server script that looks at every word on the page, looks at wikipedia, and automatically generates a tooltip (that's the title attribute) if the word is there?

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.