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.

This worked for me:

If you need to use JQuery-UI but you want to use bootstrap's tooltip, simply get a customized version of JQuery-UI from this website.

Simply uncheck the "Tooltip" option, and download it (it will be something like "jquery-ui-1.10.4.custom.js").

Simply add it to your project instead of the version you are currently using now and, you are ready to party. This will avoid the conflict. It worked like a charm to me!

Assuming that UI will called after bootsrap initialized

Store the bootstrap function just before the UI is initialized

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

Then call it as following

$('.targetClass').bstooltip();

How about just using Bootstrap popovers instead? BS popovers do not create the same conflict although they require the same tooltip.js component. Yes, they are more stylized but doesn't cause my JQuery UI buttons to go wonky.

I'm using Jquery UI only for custom autocomplete/comboboxes (so can't claim other JQ-UI controls are ok) and none of the above worked to fix the CSS issue on the combobox buttons becoming "unstyled" when invoking BS Tooltips. Switching to BS Popovers provided essentially the same effect with no conflicts, no reordering of my script imports, and no explicit bridge statements needed.

This solution seems to work well for me.

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

try using jQuery.noConflict() and see if that helps you at all. It looks like bootstrap and jQuery are using the same namespace, and perhaps the bootstrap and jQuery tooltips get loaded into the same function, or one gets loaded first.

You can also check to see which library is loaded first. Usually if you declare the same function twice in javascript the second one is the one that is used.

Thirdly, check the jQueryUI package (on their website) and see if you can download a version that does not have the tooltips included (I checked and this is totally doable).

There is a easy and good solution, just rearrange your bootstrap and jquery ui file link like this:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

Just load jQueryui before loading boostrap js file. It's work for me.

An easy way is to load bootstrap.js after jquery-ui.js, so that the bootstrap .tooltip overrides jquery UI's. If you're using a module loader like requirejs, then you could make bootstrap dependent upon jquery-ui, as such:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...

In case you...

1. Don't want to load bootstrap after jQuery UI and
2. $.widget.bridge and noConflict don't work for you and
3. You don't want to override jQuery UI tooltips

then another way of re-enabling bootstrap tooltips is as follows:

<script src="/js/bootstrap.js"></script>

<script>
	var bsTooltip = $.fn.tooltip;
</script>

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

and then you can initialize bootstrap tooltips this way:

// initialize tooltips
bsTooltip.call( $( "[data-toggle='tooltip']" ) );

The other way is to download a custom build of jquery UI.

Exclude what is not needed, in this case, tooltip.

Can download it from here https://jqueryui.com/download/

This way you can include it anywhere