Stack Overflow tags - How do they display info on mouse over?

Question

At the event of mouse over each Stack Overflow tag displays an information box beneath itself. As long as the mouse is over the tag or over the info box, it continues to be visi

Answer 1

Without being more specific all I can give you is a general idea of how it works.

The mouseover will trigger an AJAX request (probably after a short timer countdown in order to keep it firing until the pointer has been over the tag for a short time) which queries the SO database about the tag in question. If returns some kind of response, either a HTML fragment which is injected directly into the DOM, or an XML or JSON encoded data block which is used to populate an element which is injected into the DOM. The mouseout event will remove the element from the DOM. I would imagine the AJAX response is also held in a memory cache by the javascript that manages it so that the same data doesn't get repeatedly requested.

Answer 2

Look at some tooltip plugins for jQuery. As for the receiving of the HTML for the tooltip, just look at some simple $.ajax examples in the jQuery documentation.

---

Tooltips

• 30 Stylish jQuery Tooltip Plugins For Catchy Designs
• 10 Excellent ToolTip Plugins with jQuery

Answer 3

I would recommend Tooltip for something like that.

Answer 4

Add an event listener to the mouseover DOM event to display the info box. Add an event listener to the mouseout event to hide the info box. See Mouse event types for details. Retrieve the information that you want to display in the info box via XMLHttpRequest.

Answer 5

One of the many jQuery tooltip plugins:

http://jquery.bassistance.de/tooltip/demo/

Also, I think SO uses AJAX to load the information inside the tooltip, but you don't have to do that.