jquery ui tooltip conflict with bootstrap 3 tooltip

Question

I'm using bootstrap 3 for my project layout. and also i need to jquery.ui javascript file for parts of my page. the problem is both bootstrap and jquery ui has the tooltip function and i want to use bootstrap tooltip, but jquery ui tooltip show up. is there any way to disable jquery ui tooltip without any effect on other jquery ui functions?

Answer 1

Solution is very very easy.

 <script src="/js/lib/jquery-ui.min.js"></script>
 <script src="/js/lib/bootstrap.min.js"></script>

Just load jQueryUI before loading boostrap and all will be ok! Worked for me.

Answer 2

I was also facing the same issue and found a quick work around for this.

 <script src="/js/lib/bootstrap.min.js"></script>
 <script>var bootstrapTooltip = jQuery.fn.tooltip;</script>
 <script src="/js/lib/jquery-ui.min.js"></script>
 <script>jQuery.fn.tooltip = bootstrapTooltip;</script>

This will override jquery-ui's tooltip and use bootstrap's tooltip.