0

Possible Duplicate:
Create tooltip at cursor position in text area with jQuery

So I have a website with a HUGE text area, basically the whole screen. But I want to add word prediction into this. I have all the ways to make this, actually I have, but I need a ToolTip that follows the cursor. Is there a way to do this in JavaScript? Also, by cursor I don't mean mouse. The user should be allowed to move the mouse freely, as long as the text area is in Focus, but the tool tip appears where the cursor is. Is this possible in JavaScript, or am I dreaming? For reference, if anybody uses Adobe Dream Weaver, than how the results appear under the word as you type. Thanks! Also, if there are any jQuery plugins you know of that may do this, please tell! Thanks!

Edit

Also.....

I have made a ToolTip jQuery plugin before, but those are always mouse coordinates like this:

function(e) {
     if(...){
     //Code Here
     }
}

You have always imported 'e' to get the position of the mouse position. Really, all I need is a Cross Browser way to get the position of the cursor in a TextArea. Thanks!

Community
  • 1
  • 1
comu
  • 921
  • 1
  • 11
  • 29
  • http://jsfiddle.net/rlemon/AVdS9/1/ I do not see any information on the cursor from the event object. – rlemon Oct 03 '11 at 22:12
  • I know that is the problem. I guess the Event object doesn't handle cursor position :( – comu Oct 03 '11 at 22:24
  • [IE TextRange Object](http://msdn.microsoft.com/en-us/library/ms535872%28v=vs.85%29.aspx) – epascarello Oct 03 '11 at 22:34
  • This can help you http://tinkerbin.com/9Fzm3SV9 Prototype which use my newest plugin for control textarea caret :) – Schovi Oct 05 '11 at 18:38

1 Answers1

2

Your question is very vague, I'm not sure what you're asking for and you didn't provide an example so there's nothing for me to look at (hint: use JSFiddle)

Is this what you're looking for?

$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).nextAll('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});

That will simple align the tooltip to the mouse.

And you can add this code to make sure the tooltip doesn't leave the viewport.

var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip

//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if (tipVisX < 20) { //If tooltip exceeds the X coordinate of viewport
    mousex = e.pageX - tipWidth - 20;
} if (tipVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
    mousey = e.pageY - tipHeight - 20;
}

Here is a working example: http://jsfiddle.net/MarkKramer/jV2H9/

Mark Kramer
  • 3,134
  • 7
  • 34
  • 52