qTip Ajax demo sample

qtip-ajax-demo.js

<script class="example" type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function()
{
// Make sure to only match links to wikipedia with a rel tag
$('a[href*=wikipedia.org/][rel]').each(function()
{
// We make use of the .each() loop to gain access to each element via the "this" keyword...
$(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<img class="throbber" src="/projects/qtip/images/throbber.gif" alt="Loading..." />',
ajax: {
url: $(this).attr('rel') // Use the rel attribute of each element for the url to load
},
title: {
text: 'Wikipedia - ' + $(this).text(), // Give the tooltip a title using each elements text
button: true
}
},
position: {
at: 'bottom center', // Position the tooltip above the link
my: 'top center',
viewport: $(window), // Keep the tooltip on-screen at all times
effect: false // Disable positioning animation
},
show: {
event: 'click',
solo: true // Only show one tooltip at a time
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
}
})
})
// Make sure it doesn't follow the link when we click it
.click(function(event) { event.preventDefault(); });
});
</script>