jquery popup message by cursor

Question

After a bit of advice. I'm kind of after a tooltip type thing, but not exactly. I've got a site with a number of links all over the place. When these links are click they load an ajax form at the bottom of the page. Once loaded the page scrolls down to the form, which can be way off the bottom of the screen sometimes. All well and good.

When you click a link there is a slight delay, and when I would like to do is have a small "loading" message appear by wherever the cursor is, pinned to the cursor, then remove this once you scroll down to the loaded form.

Any ideas please?

Could you post the code you have so far please. – Rory McCrossan Nov 11 '11 at 11:53 — Rory McCrossan, Nov 11 '11 at 11:53

score 3 · Accepted Answer · answered Nov 11 '11 at 12:04

I've answered this for you in the code of this fiddle. It includes the HTML and the javascript to show/hide the tooltip while your ajax call is executing.

Here is the jQuery portion to see how it works.

$("#ajaxLoader").click(function() {
    $("#loading").show();

    $.ajax({
       settings etc.
       success: function() {
           $("#loading").hide();  
       }
    });

});

$("HTML").mousemove(function(e) {
    $("#loading").css({
        "top" : e.pageY,
        "left" : e.pageX + 15
    });
});

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

at your .ajax() call you can add something in the beforeSend

the rest is in this post: How do you make a picture follow your mouse pointer with jquery?

edited May 23 '17 at 11:44

Community

1
1

answered Nov 11 '11 at 11:56

JP Hellemons

5,977
11
63
128

score 0 · Answer 3 · answered Nov 11 '11 at 11:57

Let's say u have a common class for all links which is loading-link.

$('.loading-link').click(function(){
$(this).before('<div class="loading">Loading</div>');
// Adjust the position here

// your ajax stuff
$.ajax() ....

....
success:function(){
$('.loading').remove();
// scroll to bottom

}


});

jquery popup message by cursor

3 Answers3