How can I highlight every single word in jquery so

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

If you want something similar to what the NYtimes provides, I suggest that you use the Select Link plugin in JQuery, which provides a search for any word that is selected in your text. Confer this link.

Answer 2

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...