How can I add pop-up (tooltip) definitions to words on a webpage when hovered?

Question

My 250 page website has a glossary with many words and their definitions. I would like to find a way to have the words in the glossary highlighted whenever they appear in the website text, and present a "tooltip" bubble showing the word's definition when hovered. My website pages are all html -- I am not using a CMS.

I imagine I will need to use javascript for this. I have looked and looked and have found javascript functions that can highlight certain text (ie wrap it in a span tag), but I do not know how to get this to iterate through an array of the words and include their definitions, and I'm not sure how resource-intensive this would be.

Is there a glossary type program in existence that would work for me without having to manually update every instance of each word throughout the entire website? Or is there a fairly straightforward way to achieve this? Thanks!

Answer 1

This can be done using JQuery and having the glossary be a hidden div on the page, which can be loaded using AJAX if you want.

 $("#glossary h2").each(function(index) { // Get the word and its definition. var word = $(this).text(); var def = $("#glossary").find("p")[index].innerHTML; // Update all instances of that word in the content page with mouse over def. var contentHTML = $("#content").html(); contentHTML = contentHTML.replace(new RegExp(word, 'g'), '<span title="' + def + '">' + word + '</span>'); $("#content").html(contentHTML); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> Will likes to hang out with Jim. </div> <div id="glossary" style="display:none;"> <h2>Will</h2> <p>This is will's def.</p> <h2>Jim</h2> <p>This is jim's def.</p> </div>

The above function assumes that you have a single <p> for every <h2> and that all contents of the <p> are part of the definition.