将鼠标悬停在某个单词上时显示跨度，并按需替换

Question

I'm working on a spellchecker plugin for TinyMCE (3.x series). When user clicks on plugin to spellcheck I take the editor's content and send it to server, then from server I send the data back with underlining the wrong words and a list of suggestions (which is hidden). It works fine and on TinyMCE interface I see wrong words with red underline.

Now I want to show list of suggestions when user hovers (left-click is also fine) over the wrong word so that he can pick the correct word and replace it with wrong word. Can anyone guide me how should I proceed on this?

Textarea content: Fourr guys went to watc movie yesterday.

HTML: <p>Fourr guys went to watc movie yesterday.</p>

After clicking on plugin the HTML becomes:

<p>
   <span style="color: red; text-decoration: underline;">Fourr</span>
   <span class="suggestions" style="display: none;">Fore Furor Furry Fourier Four Farr Fora Fury
   Fours Fire Firer Fuhrer Fiori Fourth Dourer Fouler Foyer Fayre Fairer Fr Flour Fort Furrow  
   Purr</span> guys went to 
   <span style="color: red; text-decoration: underline;">watc</span>
   <span class="suggestions" style="display: none;">WAC Wac Wat watch Watt watt WATS</span>
   movie yesterday.
</p>

Answer 1

You can use something like

 $('span').not('.suggestions').click(function(){
     $(this).next('span').toggle();
 })

And the you'll need some sort of list from which you can select your option. Because from span it will be harder to select, but still possible, look here .

For changing just save your clicked span in some sort of variable and then replace the text in in with chosen one like

var $this;
 $('span').not('.suggestions').click(function(){
     $this = $(this);
     $(this).next('span').toggle();
 })

And then after choosing a word

$this.text(yourTextChosenVar)

UPD Added Fiddle with a little bit formated suggestions list.

UPD2 Complete fiddle