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

javascript, jquery, tooltip

Solution

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.

Problem

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!

Original source