开发者

ToolTip That Follow's Cursor/Caret Not Mouse [duplicate]

This question already has answers here: Closed 11 years ago. 开发者_JS百科

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜