How can I get Stackoverflow / Stackexchange - like tag-hover tooltips?

Question

When hovering over a tag on Stackoverflow a tooltip appears as shown below. This is probably realized via jquery.append, as it inserts HTML code at the very end of the HTML document. Upon each hover-event, after some time delay, an AJAX request is made, - probably via jquery.load(...)

The url query sent to webapps.stackexchange.com is for instance _=1318962590136, which is a dynamic Id.

• 1) How does this work on the client- and server-end, and what are the benefits?

The payload for the toolip is HTML and looks like this:

<div><div class="tm-heading">...</div></div><span>.......</span>

Upon leaving the tag, the dynamically loaded HTML is removed. The css styles are already present in the loaded css-sheet of the stackoverflow site.

• 2) No initially declared event seems to be attached to the styled <a> link element, which makes up the tag. Only mousedown events seem to be declared (checked via Chrome).

JavaScript-DeObfuscator is giving some clues: The event listeners are dynamically added and removed as well...

function (a, b, c) {
    a.removeEventListener && a.removeEventListener(b, c, !1);
}

Answer 1

By updating the data only when the user triggers the hover event, it means that you don't have to constantly query the database every x amount of seconds. This method is a total waste of resources, especially when you want extremely up-to-date information, where it may be tempting to call the server every second.

But a better way of doing this (even better than the method you talk about in your question) is a method called Comet. Comet in simple terms means that the client makes a request to the server, and then waits for the server to respond (i.e. when the data on the server is updated). This means that the server is only called when there is updated data to be pushed to the client. This is how (I believe) Facebook works for instance.