jQuery - séparer l'événement onClick pour chaque mot dans un paragraphe

Question

Je souhaite autoriser les utilisateurs de ma page à cliquer sur un mot d'un paragraphe pour déclencher une info-bulle (comme une définition de mot ou un autre événement), mais je ne veux pas pour gonfler mon code HTML avec des étiquettes enroulées autour de chaque mot.

L'effet que je vais donner est similaire à ce que fait le New York Times dans ses articles. Double-cliquer sur un mot dans un article NYT fait apparaître une info-bulle, sur laquelle vous pouvez cliquer pour plus d'informations. Example. Mais vous remarquerez dans la source qu'il n'y a pas de balisage dans la page d'origine pour ces infobulles.

Est-ce que cela peut être réalisé avec jQuery? Quelque chose comme, onclick n'importe quel mot?

Answer 1

c'est en fait pas sur le clic, c'est sur la sélection je pense. Regardez le this plugin.

Mise à jour:

Aussi j'ai trouvé discussion similaire sur ths Stackoverflow: Tooltip triggered by text selection

Answer 2

Peut-être que vous pouvez essayer de le faire comme ceci:

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 
} 

Cordialement