基于jQuery的用户悬停卡

Just a question that I am having trouble resolving using Google...

I have a web application I am developing where I have usernames attached to certain types of records. What I need to be able to do is add an event using data- attributes in html5 so that when the mouse hovers over the link in question it opens up an AJAX powered window showing user information such as can be seen in this link...

http://www.google.com.au/imgres?imgurl=http://forum.jquery.com/viewImage.do%253FfileId%253D14737000003575724%2526forumGroupId%253D14737000000003003&imgrefurl=https://forum.jquery.com/topic/how-to-show-user-presence-icon-in-web-parts-using-jquery&h=198&w=456&tbnid=rMRUSSAlcbuoEM:&docid=5Mxpo87Lk-PRRM&ei=b8ZDVoTDM8Lt0gTksI84&tbm=isch&ved=0CEcQMyhEMEQ4ZGoVChMIxLag1bqJyQIVwraUCh1k2AMH

Now I have tried to access that URL and get a server error from the jQuery Forums, in addition searching Google brings up a large number of pages regarding jQuery powered static tooltips but nothing that I can find that will open a hovering layer such as in the attached example image.

I am open to doing this in vanilla JS however as most of the UI is powered by jQuery I was hoping there would be an existing jQuery plugin or a jQuery solution to my need.

Technical

• Usernames will be displayed in hyperlinks with attributes data-toggle="sso-user", data-user-id="some-user-id"
• Needs to be ajax based when the hover occurs as there could be any number of usernames displayed on the page.
• Needs to work with the jQuery selector to select based on data attributes
• Needs to have a delay option or some manner to delay the showing of the window to prtevent the hover layers from being displayed simply by passing the cursor over the link

I know that this is a very specific enquiry and I am only asking as I am having difficulty locating any answer myself using Google. Preference would be for an existing off the shelf plugin although if none is available would be happy to do this as a stand alone class run on page load using jQuery as the back end.

Thanks in advance.

Try the jQuery UI Dialog widget. You should be able to do something like this:

$(".selector").html("<p>Your HTML</p>");

$(".selector").dialog({
  autoOpen: false
});

$(".trigger").hover(function(){
  $(".selector").dialog("open");
});

If you want to load an external page into the dialog before opening it, you could try this:

$(".trigger").hover(function(){
  $(".selector").load('external-page.html', function(response, status, xhr){
    if (status == "error") {
      $(".selector").text("Sorry, there was an error.");
    }
    $(".selector").dialog("open");
  });      
});

See the Dialog widget API documentation and the jQuery load method documentation for more information.