Tooltip working in localhost but not on a deployed site

Question

I am using bootstrap tooltips in my site. When viewing it in localhost, the tooltip appears when hovered. However, when I view it on the deployed site, the tooltips do not work and I get the error "TypeError: f is not a function".

Here is my html:

<div data-toggle="tooltip" data-placement="bottom" data-html=true title="ToolTipTitle" id="ToolTipID">2016</div>

Javascript:

$(document).ready(function() {
   $("[data-toggle=tooltip]").tooltip({ 
        template: '<div class="tooltip"  id="CustomToolTips" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
   });
});

I do not understand what could be causing it to work in localhost but not on my deployed site. Is it the timing in which the tooltip is added?

Thanks

Answer 1

The issue was being caused by the timing of the tooltip being created. I moved

$("[data-toggle=tooltip]").tooltip({ 
    template: '<div class="tooltip"  id="CustomToolTips" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});

to the very end of the $(document).ready() and it fixed the issue