Ajax Popup Tooltips
I was sent a link to Caleb's blog about an ajax tooltip popup script. It's a great article but the script was a little to specific for my uses. As I played with the script I found some things I wanted to change a bit.
One issue is I needed to add it to a site with jQuery 1.2.6 (and for reasons I cant begin to understand) upgrading to a newer version of jQuery was not an option. the other issue was I needed several different tooltips on the same page. So I rewrote parts of the script.
; (function($)
{
$.popup = {
defaults: {
hideDelay: 500,
currentID: null,
hideTimer: null,
popupAjaxRequest: null,
requestUrl: '',
containerHtml: '<div class="PopupContainer">'
+ '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="PopupPopup">'
+ '<tr>'
+ ' <td class="corner topLeft"></td>'
+ ' <td class="top"></td>'
+ ' <td class="corner topRight"></td>'
+ '</tr>'
+ '<tr>'
+ ' <td class="left"> </td>'
+ ' <td class="center"><div class="PopupContent"></div></td>'
+ ' <td class="right"> </td>'
+ '</tr>'
+ '<tr>'
+ ' <td class="corner bottomLeft"> </td>'
+ ' <td class="bottom"> </td>'
+ ' <td class="corner bottomRight"></td>'
+ '</tr>'
+ '</table>'
+ '</div>',
emptyContent: ' ',
errorMessage: {
idReplacementRegEx: '\{0\}',
errorText: '<span style="color:red" class="smallText">We did not return a valid result for Id {0}. Please have your administrator check the error log.</span>'
},
cssClasses: {
PopupContentDiv: '.PopupContent',
PopupTrigger: '.PopupTrigger',
RequestDiv: '.PopupResult'
}
}
};
$.fn.extend({
popup: function(settings)
{
settings = $.extend({}, $.popup.defaults, settings);
//var hideDelay = 500;
//var currentID;
//var hideTimer = null;
//var popupAjaxrequest = null;
var container = $(settings.containerHtml).mouseout(function()
{
if (settings.hideTimer)
clearTimeout(settings.hideTimer);
settings.hideTimer = setTimeout(function()
{
container.find(settings.cssClasses.PopupContentDiv).html(settings.emptyContent);
container.css('display', 'none');
settings.currentID = '';
}, settings.hideDelay);
}).mouseover(function()
{
if (settings.hideTimer)
clearTimeout(settings.hideTimer);
});
$('body').append(container);
$(this).find(settings.cssClasses.PopupTrigger).mouseover(function()
{
// format of 'rel' tag: pageid,guid
var newId = $(this).attr('rel');
// If no guid in url rel tag, don't popup blank
if (newId == '')
{
container.css('display', 'none');
settings.currentID = '';
return;
}
if (settings.hideTimer)
clearTimeout(settings.hideTimer);
if (settings.currentID == newId)
return;
settings.currentID = newId;
var pos = $(this).offset();
var width = $(this).width();
if (settings.popupAjaxrequest)
{
settings.popupAjaxrequest.abort();
settings.popupAjaxrequest = null;
}
popupAjaxrequest = $.ajax({
type: 'GET',
url: settings.requestUrl,
data: 'id=' + settings.currentID,
success: function(data)
{
if ($(data).find(settings.cssClasses.RequestDiv).length != 0)
{
var text = $(data).find(settings.cssClasses.RequestDiv).html();
// Verify that we're pointed to a page that returned the expected results.
if (text != '')
{
container.find(settings.cssClasses.PopupContentDiv).html(settings.errorMessage.errorText.replace(settings.errorMessage.idReplacementRegEx, settings.currentID));
}
// Verify requested id is this id since we could have multiple ajax
// requests out if the server is taking a while.
if (data.indexOf(settings.currentID) > 0)
{
container.find(settings.cssClasses.PopupContentDiv).html(text);
}
container.css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
container.css('display', 'block');
}
else
{
container.find(settings.cssClasses.PopupContentDiv).html(settings.emptyContent);
container.css('display', 'none');
}
settings.popupAjaxrequest = null;
},
error: function(data)
{
container.find(settings.cssClasses.PopupContentDiv).html(settings.errorMessage.errorText.replace(settings.errorMessage.idReplacementRegEx, settings.currentID));
container.css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
container.css('display', 'block');
settings.popupAjaxrequest = null;
}
});
}).mouseout(function()
{
if (settings.hideTimer)
clearTimeout(settings.hideTimer);
settings.hideTimer = setTimeout(function()
{
container.find(settings.cssClasses.PopupContentDiv).html(settings.emptyContent);
container.css('display', 'none');
settings.currentID = '';
}, settings.hideDelay);
});
}
}); //fnextend end
})(jQuery);
Using the script is fairly simple
$("#container").popup({requestUrl:"/someurl.aspx"});
When I have more time, I will try to make it work using the 1.3.x jquery live function.
If you have not already, check out Caleb's post about it. I understand he has posted a newer version that tries to avoid excessive ajax requests.
