display alert when mouse hovers over word in text

Question

I have been struggling with this for a few days. I need somebody to steer me in the right direction. I have been searching on the web. I am not sure if I took the right approach

Answer 1

Using jQuery lettering plugin

<p class="word_split">if you were not there, else I would not have won.<p>


$(".word_split").lettering('words');
$('.word_split').mouseover(function(event) {
    var word=event.target.innerHTML;
    if (word == "else")
       alert("Yep");
});

here's a demo: jsFiddle

Answer 2

I would do something like this: It will go through and find all else words, and wrap them in a span with a listener bound:

<p id="hello">What else would you say?</p>

-

​var hello = document.getElementById('hello');
var str = hello.innerHTML;
str = str.replace(​​​ /\b(else)\b/g, '<span onmouseover="func1()">$1</span>' );​​​​​​​​​​​​​​​​​​​
hello.innerHTML = str;

function func1() {
  alert('there');
}

Check out the fiddle.