Loading Bootstrap Tooltip’s Data Dynamically Using AJAX

This is easy to do but what if the process to get this information adds a significant amount of processing time? You can dynamically load the data from another URL. The first step is to setup the element:

<div class="hoverToolTip">Data</div>
Then you need to setup the javascript to load the data:

$('.hoverToolTip').tooltip({
    title: hoverGetData,
    html: true,
    container: 'body',
});

The important piece of this is the title attribute which specifies the function to use to load the data.

I found that you MUST cache the result or bootstrap will request the data twice which results in this crazy function:

var cachedData = Array();

function hoverGetData(){
    var element = $(this);

    var id = element.data('id');

    if(id in cachedData){
        return cachedData[id];
    }

    var localData = "error";

    $.ajax('/your/url/' + id, {
        async: false,
        success: function(data){
            localData = data;
        }
    });

    cachedData[id] = localData;

    return localData;
}