Create tooltip at cursor position in text area using jQuery

Question

I am trying to create a tooltip above an input carriage in a text area. It would be easy if I could get the x, y coordinates of the carriage in the text area, however I was looking a bit and cannot figure out how to do this.

Say the user enters a text area and then presses a key (for example, the @ character). I am trying to show a little hint above the text area caret.

Any ideas?

Answer 1

Hmmm I really don't see anything in jQuery events that will easily provide you with the xy coordinate for the caret.

However, there are several ways to determine the caret position in a text field:

http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html

Is it possible to programmatically determine the position of the carriage in the <input type = text> element?

Caret position in the text box, in characters from the beginning

Using this, you can try to estimate the coordinates of the pixels for the tool tip.

If you want this to be more accurate, use a monospace font inside your text fields.

//depending on size of font var charWidth = 10; //using any number of the above methods to get caret position var caretPosition = getCaretPos('#myTextField'); var textFieldOffsetX = $('#myTextField').offset.left; var toopTipPositionX = caretPosition * charWidth + textFieldOffsetX; 

It is not accurate and will not be perfect, but it can be close enough.

Answer 2

Why should the tooltip be in the carriage? Why not place it above (or somewhere nearby) in a text box? Here is a demo of what I mean.

 $('textarea').keyup(function(e) { switch (e.which) { // @ symbol case 50: makeTooltip(e, 'you typed in an at symbol'); break; } });