Question

I have a PHP website that contains a lot of technical content. I created a glossary for some of the more obscure terms used on the website. I would like tooltips (or hint bubbles, whatever they’re called) to be displayed whenever a user hovers over one of these terms.

I found a ton of jQuery extensions that seem to do what I want but they need to be manually linked to each term instance by setting a span tag to a specific class.

I want this done automatically. How should I proceed?

Answer 1

I’d recommend doing this server-side. A jQuery plugin will slow the page down when there are many elements on the page.
You might get something like:

$content = "<p>Lorem ajax ipsum</p>";

$terms = array(
    'ajax' => 'Asynchronous JavaScript and XML',
);

foreach ($terms as $term => $explained) {
    $content = str_replace($term, '<acronym title="' . htmlspecialchars($explained) . '">' . $term . '</acronym>', $content);
}