'Fix jQuery UI and Bootstrap tooltip conflict

I'm designing a form using Bootstrap. I have an element that I have applied .sortable to:

$(function() {
  $('#field_wrapper').sortable({
    placeholder: "drop"
  });
$('#field_wrapper').disableSelection();
});

I want to apply a Bootstrap tooltip to the element but have discovered a conflict in the jQuery with:

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

Is it possible to use both?

jquerytwitter-bootstrapjquery-uitooltipjquery-ui-tooltip


Solution 1:[1]

I had also face this problem recently. I also want to load the bootstrap tooltip but instead the jquery UI tooltip loaded. I have also searched and finally one simple solution that works for me that is just put the jquery-ui.js just above the bootstrap.js and proper.js

Solution 2:[2]

Simple fix is to rename the Bootstrap tooltip function name (non-minified code) as follows:

/**
 * ------------------------------------------------------------------------
 * Constants
 * ------------------------------------------------------------------------
*/

var NAME$6 = 'tooltip';

Change NAME$6 to a unique name, example:

var NAME$6 = 'bsTooltip';

Then reference as $.bsTooltip(options).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Santosh Ghimire
Solution 2 Tyler2P

Related Questions