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!

• javascript
• jquery
• tooltip

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.