Greasy Fork

Adding Tooltips with GreaseMonkey Javascript

I~ would like to add tool tips to already existing text that may appear on some pages. This is to create a Greasemonkey script in Firefox just to help speed up some processes for us at work instead of checking a reference sheet over and over.

For example, say guests can submit a post that says they either want a cat, dog, or snake. So, unpredictably, you see a post that mentions either a cat, dog, or snake on the screen.

I'd want to be able to mouse/hover over the result, no matter which one, to get a specific tool tip for each.

Say someone submitted cat. If I go to just hover over the word cat, "meow" appears in a tooltip.

If they submitted dog, "woof" appears in a tool tip.

If they submitted snake, "hiss" appears in a tool tip.

Obviously this isn't really what it's for, but the list of things I want to do this for is fairly long, about 20-30 items. I've learned a fair amount of javascript but not for mouseovers like this, so if I can get a basic GreaseMonkey guideline/outline, I can finish the rest myself (which I prefer). I would just like a starting guideline/outline using the information above. So, you can type in "cat dog snake" into JSFiddle to see it work I suppose, haha.

Also a side note: In the future, if I were to test out coding on JSFiddle for Firefox GM settings, what Frameworks/EXT, LOAD TYPE settings would I use? I haven't been able to get it to preview properly

I'm not sure how to answer the last paragraph, but I have an idea of how the script would work.

Firstly, the script would read the .innerHTML of the element with the text "cat dog snake", and use regex to find all occurrences of the user specified word(s). Then, it would replace each "cat" with an html element containing the word "cat". Now the text should look exactly the same as before, but the word "cat" is in it's own box, which we can attach the "mouseover" event listener which fires whenever a user moves their mouse over the word "cat". When they do, the script can make a tooltip appear where the user's mouse is on the page using event.pageX and event.pageY which contain the coordinates of the mouse.

I'll start working on an example with JSFiddle, but my example will only be guaranteed to work on Chrome.

Progress update: I thought it was pretty much done, but ran into an issue which is going to make it a little more complicated, but it will still work.

If you were wondering, the issue is that replacing innerHTML also removes event listeners, which we don't want. So instead of:

element.innerHTML = element.innerHTML.replace(/*more code*/);

It's:

/* A LOT more code involving looping over just the text nodes of 'element', cutting them into snippets, adding some back into the list, and appending children at specific locations.*/

Progress update: The script is really close to being done, just one annoying bug left, but I'm famished, so I'll fix it in 45 minutes.

Okay I squished the last bug, working demo here: https://jsfiddle.net/w5vgsyep/7/

@KittyKinetic Oh, you'll probably want to style it how you want, maybe like underline the word when you hover over it? If you need help just ask. :)

If you were curious what the last bug was, it is that when you remove a child node, it's .nextSibling property is set to null, but that's to be expected. The weird part is, the .nextSibling property of a deleted node is always null. So even if you explicitly set that property to something, it goes back to null. Pretty annoying. :/