使用jQuery在文本区域中的光标位置创建工具提示

问题描述:

我正在尝试在文本区域中的输入插入符号上方创建工具提示.如果我可以在文本区域中获得插入符号的x,y坐标,这将很容易,但是我已经搜索了一段时间,无法弄清楚该怎么做.

I'm trying to create a tooltip above the input caret in a text area. This would be easy if I could get the x,y coordinates of the caret in the text area, however I've been searching for a little while and cannot figure out how to do that.

假设用户在文本区域中键入内容,然后按一些键(例如@符号).我正在尝试在文本区域的插入符号上方显示一些工具提示.

Say a user is typing in a text area and then presses some key (@ symbol for instance). I'm trying to show a little tooltip above the text area caret.

有什么想法吗?

为什么工具提示必须在插入符号处?为什么不将其放置在文本区域的上方(或周围)?这是我的意思的演示.

Why does the tooltip have to be at the caret? Why not position it above (or somewhere around) the textarea? 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;
    }
});