How to make tooltip working with ajax

Question

Q1) I am using the tootltip from twitter bootstrap. I just noticed that its not working when the contents are added with ajax. After lots of googling, the solution seems to trigger the tooltip after ajax request. But in my case this is not possible because I am relying on the built in ajax API's for the framework. Is there any other work around?

$('.tootip').tooltip({placement:'left'});

Q2) In jQuery on() documentation, the usage is mentioned as

$(document).on(event, selector, function(){ //do stuff here })

So is this I have to do it?

$(document).on('ready', '.tootip', tooltip({placement:'left'}));

But its not working.

Answer 1

A1) One of the options/parameters you give to the ajax call is a callback function that triggered when the ajax call done and succeded. This success callback should initialize the tooltip.
For example, if you are using jQuery:

$.ajax({
    url: 'your url'
    success: function(result) {
        // do your sruff here. Result holds the return data of the ajax call
    }
});

A2) Look at the 3'rd parameter: function(){ //do stuff here }. You have to supply a function. Instead, what you have supplied is the result of invoking the function tooltip({placement:'left'}) which in this case returns an object and not a function. You should do:

$(document).on('ready', '.tootip', function() {
    $('.tootip').tooltip({placement:'left'}); 
});

Update regarding your comment:
Inside a function, whether is a success callback or an event function, you can do whatever you like including call multiple functions:

$(document).on('ready', '.tootip', function() {
    // Do many operations as much as you like here
    func1();
    func2();
});

$.ajax({
    url: 'your url'
    success: function(result) {
        // Do many operations as much as you like here
        func1();
        func2();
    }
});

Hope this helps!