Using a table's values to dynamically generate onmouseover tags

So, I have a massive table with only two columns - an acronym list and a definition. Each entry in the table also has a unique ID, which happens to be each acronym unless there are multiple definitions for an acronym, in which case it goes xxx1, xxx2, etc. There's almost 800 acronyms in the list. I doubt I need to do anything to this list because it's already pretty coherently formatted.

I also have some rather large blog entries that include links already to the right spot; use of YYY within the blog already has a hyperlink that goes to "acronyms/#yyy" for instance, or a given use of XXX goes to acronyms/#xxx1 or acronyms/#xxx2 as required. The links work great. The blog entries in question have been written over the course of several years, so they are way too much effort to hand-jam all the onMouseOvers.

What I'd like to do is write something - most likely a combination of JS and CSS - that will take the acroynym/#xxx1 information from the id=xxx1 in the <a> tag, and use that to put the text from the subsequent <td> in the table as the hover text in the blog without hand writing it. There's literally thousands of uses of the acronyms within the blogs already.

Unfortunately, I don't even know where to start. I'm guessing because I can't find references to what I want to do it probably hasn't been done for a reason.

Where it will end up - if what I want to do is even possible - is as part of the site header code injection in a Ghost blog. But I'm just looking for a start.

Solution

If I understand correctly (it would be helpful to have had some code examples demonstrating the use case) you want the acronyms on your blog page(s) to display the entry for that acronym from the acronym glossary you have already complied. If that is so then this is my answer...

To begin with it is not a trivial matter to request the data from one page, sort it, select the desired portion, and then display in another page on a mouseover event. If you think about it it would mean requesting, downloading and processing another page before the users mouse has moved on.

However, the acronym glossary could be transformed into a more straightforward, smaller format where it could be used on the desired page to populate your acronyms. One option for storing this information could be plain text, for example...

[acronym_glossary.txt]
aaa, description of acronym aaa
bbb, description of acronym bbb
...
xxx1, description of acronym xxx1
xxx2, description of acronym xxx2
yyy, description ... etc etc

Another option might be JSON - which is a text-based, human readable data-interchange format which can be easily processed by JavaScript, for example...

[acronym_glossary.json]
{
    "aaa": "description of acronym aaa",
    "bbb": "description of acronym bbb",
    ...
    "xxx1": "description of acronym xxx1",
    "xxx2": "description of acronym xxx2",
    "yyy":  "description ... etc etc"
}

I would suggest using JSON format as it's platform and application agnostic and easily dealt with by the majority of programming languages.

More information about using JSON and JavaScript can be found in the links at the bottom.

So let's assume that you have a glossary file in JSON format: acronym_glossary.json.

The objective is to avoid hand-editing all your blog post's <a> tags to add a description of the acronyms used. This can be accomplished by a small JS program which fetches the JSON file, checks the <a> tags ids, and then inserts the corresponding entry in the the <a> tags title attribute. Additionally the script can unload itself once this task is complete.

Let's now assume that your JS program is contained in a file called acronym_insert.js and that you have added a <script> tag to the blog pages.

<!-- HTML : blog page example -->
<script id="acronym-insert" src="path/to/acronym_insert.js"></script>

There now follows an example of how this might be achieved given the assumptions already mentioned, including that the acronyms themselves are identified by an <a> tag's id attribute...

<a id="aaa" href="acronym/#aaa">aaa</a>

... See the comments for a description...

[acronym_insert.js]

// when the pages content has been loaded...
document.addEventListener("DOMContentLoaded", function() {

    // collect all the page's a-tags as an Array
    var aTags = [].slice.call( document.querySelectorAll("a") ),
        scriptTag;
    
    // function using JS fetch API to request the 
    // JSON glossary and convert it to a JS Object
    // with a fallback for older browsers
    function grab(fn, path) {
        var req;
        window.fetch ? fetch(path).then(function(res) {
            return res.status >= 200 && res.status < 300 ?
                Promise.resolve( res.json() ) : 
                Promise.reject( new Error(res.statusText) );
        }).then(fn).catch(function(err) {
            console.log("! FETCH ERROR:", err);
        }) : (
            (req = new XMLHttpRequest()).addEventListener("readystatechange", function() {
                4 === req.readyState && 200 === req.status && fn(
                    JSON.parse(req.responseText)
                );
            }, !1),
            req.open("GET", path), req.send()
        );
    }
    
    // grab the JSON file
    grab(function(glossary) {
        // 'glossary' = parsed JSON returned from grab()
        
        // attach the keys to a variable as an Array
        // e.g. [aaa, bbb, ... xxx1, xxx2, yyy ]
        var glosKeys = Object.keys( glossary );
        
        // iterate over the a-tags
        aTags.forEach(function(tag) {
            
            // iterate over the glossary keys and
            // compare each one to the tag.id
            glosKeys.forEach(function(key) {
                
                // if tag.id === key then
                tag.id === key && (
                    // add the description that matches 
                    // the key in 'glossary'
                    tag.title = glossary[key]
                );
            });
        }),
        
        // after completion unload script
        scriptTag = document.getElementById("acronym-insert"),
        
        scriptTag.parentElement.removeChild( scriptTag )
        
    }, "path/to/acronym_glossary.json")

}, !1);

What's going on:

The function of the document's "DOMContentLoaded" event handler is called when the page is loaded.
Inside this function all the <a> tags on a page are collected in an Array.
A function grab() is defined to fetch the acronym_glossary.json file and parse it into a JavaScript Object.
This function takes two arguments: 1. a function to process the JavaScript Object, and; 2. the path to the JSON file.
Inside the function the keys of the JS Object's key-value pairs are assigned to a variable as an Array.
As we now have 2 Arrays we can iterate over one, and by iterating over the other compare the information in the first one to the second.
tag id's are compared to glossary keys.
if a match is found the key is used to add the acronym description to the <a> tag's title attribute.
On completion the script identifies and removes itself - this may have benefits for browser performance in the event of a VLJ (very large JSON) file but isn't strictly necessary, and most browsers will cache the file making the next loading of the glossary almost seamless.

Additionally. If your acronym glossary page is consistently formatted it would be relatively easy to collect the information and build the JSON file with JavaScript too - though JSON is easily hand-editable. Please amend you question with HTML code examples (not the whole page please!) and leave a comment if an explanation of this would be handy.

Hope that helps. ;)