Question

You know how those pop up advertisements work? the ones that are super annoying when you hover over them. I want to create something similar.

What I want to do is given specific per-determined words with a given “definition” associated with those words, like a key value pair, search my web page for those words then make those words if clicked on pop up a little tooltip giving that words definition, the value.

Now I can kinda piece this together but I want to do it the most efficient way with caching the dictionary and caching as much as possible. so I don’t have to create two arrays every time the page loads then check if the words on the page match anything in the dictionary and if so make a tooltip or little pop up.

Can anyone give me any ideas or even code hints/links to help me get the best results/load times so It doesn’t take forever every time the web page loads.

I haven’t started making any of it yet, so I can go any route, I just want it to be fast.

Answer 1

Take your text container element and split(' ') it’s content by words. Iterate over this array of words and wrap those of the words that are in the dictionary with a span or some other element. Then, join(' ') the array back and replace the container’s innerHTML with it.

Next, add a listener to the container with a handler that will react only if e.target is a span.

container.addEventListenter('click', function (e) {
    if ('SPAN' === e.target.tagName) {
        lookUpWord(e.target)
    }
}, false)

The function lookUpWord will analyze the span‘s text and draw the looked up definition.

As for the format of the dictionary, it’d better be a simple JSON object, like this one:

var dictionary = {
    "astrolabe": "An astronomical and navigational instrument for gauging the altitude of the Sun and stars.",
    "logarithm": "For a number x, the power to which a given base number must be raised in order to obtain x.",
    "Darth Vader": "Lover, warrior, Dark Lord of the Sith."
}

A lookup in such an object would be as trivial as:

 var word = 'Darth Vader'
 var definition = dictionary[word]

To check if a word is in the dictionary:

if (word in dictionary) { /* ... */ }