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 visible. Moving the mouse out of either the tag or the info box causes the info box to disappear.
How can I achieve this using JQuery or JS? Please explain the process of retrieving the tag info from the server as well.
update:
The important thing is it's hard to believe that it is a tooltip. Because a tooltip will typically vanish when the tag loses the mouse pointer from its surface. But as for the Stack Overflow tooltips they stay still even if the mouse is moved over the information area. That's why I raised this question to clarify about this. How is this type of customization done?
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
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.
I would recommend Tooltip for something like that.
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.
