ToolTip That Follow's Cursor/Caret Not Mouse [duplicate]
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!
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/
精彩评论