jQueryUI Tooltips are competing with Twitter Bootstrap

I have been able to get some tool tips to work finally with the following code:

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

and then

<script>
    $('[rel=tooltip]').tooltip();
</script>

The problem I'm running into is that it is using jQueryUI tooltips (no arrows, big ugly tooltips) instead of Bootstraps.

What do I need to do to make use of the Bootstrap Tooltips instead of jQueryUI?

Both jQuery UI and Bootstrap use tooltip for the name of the plugin. Use $.widget.bridge to create a different name for the jQuery UI version and allow the Bootstrap plugin to stay named tooltip (trying to use the noConflict option on the Bootstrap widget just result in a lot of errors because it does not work properly; that issue has been reported here):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

So the code to make it work:

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

Nice copy paste code that also handles the button conflict:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

A simple solution is to load bootrap.js after jquery-ui.js, so that the bootstrap .tooltip method takes precedence.

In case you must load jquery-ui.js after bootstrap.js here is how to do it:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

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