Howto display popup/tooltip below single word in html input field
<p>I want todo some spellchecking on an html input field. For this i would like to highlight the wrong word and display alternatives down under the word. </p>

<p>Functionality in background is already working, ight now i am using <a href="http://jquery-spellchecker.badsyntax.co/" rel="nofollow">http://jquery-spellchecker.badsyntax.co/</a> (mentioned by siddhartha).
I understand and found examples how this can be done on a rich text field but not on a single line input <code>&lt;input type="text" value="Here iz somme..."&gt;</code>. 
My problem is that i do not get the word select box on the right place. If html input is "Here iz somme" and i click 'Iz', I can't put the popup below that text.</p>

<p>This is how it should look like (Imagine "Here iz somme badlyy speldt worddz" is html input value)</p>

<p><img src="http://i.stack.imgur.com/7iflD.png" alt="enter image description here"></p>
