First prepare the variables for each tooltip.
var $tooltip = null;
var $tooltip2 = null;
var $tooltip3 = null;
Create a function to initialize a tooltip.
function initTooltip($theTooltip, theOptions) {
var defaultOptions = {
delay : 50,
slideInSpeed : 200,
slideOutSpeed : 200,
relative : false,
effect : 'slide',
direction : 'down',
position : 'top center',
offset : [-15, 0]
};
if (typeof theOptions != 'undefined') {
theOptions = $.extend({}, defaultOptions, theOptions);
} else {
theOptions = defaultOptions;
}
$theTooltip.tooltip(theOptions);
}
In the document ready event, first look up the tooltips in the DOM and then initialize each one separately.
$(document).ready(function() {
$tooltip = $('.marcleidnot[title]');
$tooltip2 = $('.fav[title]');
$tooltip3 = $('.nofav[title]');
initTooltip($tooltip, {
delay : 100,
slideInSpeed : 300,
slideOutSpeed: 300,
bounce : false,
offset : [-15, 0]
});
initTooltip($tooltip2);
initTooltip($tooltip3);
});
When the AJAX call finishes, just destroy the specific tooltip and then recreate it.
function notifications() {
$.ajax({
type: "POST",
url: "<?php echo $notifurl;?>",
success: function(msg) {
// Hide and destroy the old tooltip before you replace the HTML.
$tooltip.hide().remove();
// Replace the old HTML with the new HTML.
$("#ajaxnotif").empty().html(msg);
// Update the variable for the replaced tooltip.
$tooltip = $('.marcleidnot[title]');
// Init the tooltip again.
initTooltip($tooltip, {
delay : 100,
slideInSpeed : 300,
slideOutSpeed: 300,
bounce : false,
offset : [-15, 0]
});
}
});
}