jQuery - separate onClick event for each word in a paragraph

Question

I want to allow viewers of my page to click any word in a paragraph to trigger a tooltip (like a word definition, or some other event) but I don't want to bloat my html with tags wrapped around each word.

The effect I'm going for is similar to what the New York Times does in their articles. Double-clicking any word in a NYT article makes a tooltip appear, which can be clicked for more info. Example. But you'll notice in the source there's no markup in the original page for those tooltips.

Can this be achieved with jQuery? something like, onclick any word?

score 1 · Answer 1 · edited May 23 '17 at 12:31

1

it's actually not on click, it's on selection I think.

Take a look on this plugin.

Update:

Also I found similar discussion on ths stackoverflow: Tooltip triggered by text selection

edited May 23 '17 at 12:31

Community

1
1

answered Sep 06 '11 at 06:45

Samich

29,157
6
68
77

this looks like the right start. i think the "Tooltip triggered by Text selection" method has two advantages: (a) it can be triggered both by doubleclick and by dragging a text selection, and (b) it can limit which words trigger the tooltip. That's important because I will want to assign different tooltip content to certain phrases and possibly to each word. Much thanks for your help! – Heraldmonkey Sep 07 '11 at 10:42

score 0 · Answer 2 · answered Sep 06 '11 at 07:26

Maybe you can try to make it like this:

var openTag = "<a href='#' onclick='javascript:wordAction(this)'>";
var closeTag = "</a>"

var paragraph = $("#paragraph");
var newParagraphHtml = paragraph.html().replace(" ", closeTag + openTag + " ");
paragraph.html(openTag + newParagraphHtml + closeTag);

var wordAction = function(el) {
    var word = el.html();  
    // do wat you want with your word
}

Regards

jQuery - separate onClick event for each word in a paragraph

2 Answers2