Question

I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the “Title” tag.

Here is the code i am using to invoke TipTip

<script type="text/javascript" src="jquery.tipTip.js"></script> 
<!-- ToolTip script -->
<script type="text/javascript"> 
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});
</script>
<!-- End ToolTip script -->

and in the body

sample content. <a href="" class="someClass" title="test data">sample</a>,stuff.

This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.

<script type="text/javascript">
//loading sample ajax data
$(document).ready(function(){  
$('#remote').load('sample.html');  
});  


</script>

Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.

Could someone please advise me?

Answer 1

An easy solution would be to create a function that activates TipTip:

function activateTipTip() {
    $(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}

$(document).ready(function(){
    activateTipTip();
    $('#remote').load('sample.html', function() {
        activateTipTip();
    });  
}); 

Not very elegant, but should work though.