How would I implement stackoverflow's hovering dialogs?
Although I was under the impression they used jQuery's UI Dialog for this, I am not too sure anymore. However, it is not too difficult to whip this up yourself. Try this code:
$('.showme').click(function() { $('.error-notification').remove(); var $err = $('<div>').addClass('error-notification') .html('<h2>Paolo is awesome</h2>(click on this box to close)') .css('left', $(this).position().left); $(this).after($err); $err.fadeIn('fast');});$('.error-notification').live('click', function() { $(this).fadeOut('fast', function() { $(this).remove(); });});
With these styles:
.error-notification { background-color:#AE0000; color:white; cursor:pointer; display: none; padding:15px; padding-top: 0; position:absolute; z-index:1; font-size: 100%;}.error-notification h2 { font-family:Trebuchet MS,Helvetica,sans-serif; font-size:140%; font-weight:bold; margin-bottom:7px;}
And click here to see it in action.
However, I think you'd still need to tweak it a little bit to give it the right positions depending on the situation in which you are using it. I took care of this for the left position because it is working for the top, but I think there may be some situations in which it won't. All things considered, this should get you started. If you want a more robust implementation, you should check out jQuery BeautyTips which is really awesome and would make this trivial to implement.