How can I highlight every single word in jquery so that I can provide a definition for each word?

Question

What I am trying to do is allow the user to scroll over any word on a web page and when the mouse goes over the word it is highlighted (I know I can use hover for that). However I do not know how to select individual words, from the paragraph. The ultimate goal is to allow the user to click on the word and a definition appears over the word, but I think I can figure that out once I can hover over individual words.

Answer 1

There is no way in Javascript to do that, the smallest thing you can interact with, in general, is a DOM element. So you could technically wrap each word inside a <span>, but that would seem to be seriously overkill and probably have a huge performance impact as well.

Instead, what most sites do, that provide this functionality, is they do the hover popup thing whenever you select text (see this question for some code to get the current selection).

Personally, I find it really irritating (nytimes.com does it like that, for example), but maybe that's just me...