Bootstrap and Jqueryui Conflict

Bootstrap and jQueryUI Conflict

Ideal solution will be to take QueryUI without tooltip. This will work. In case you don't want to do that please include Bootstrap after JQueryUI. Ensure you have unique components from each (you can custom build both libraries with required components)

Bootstrap has a way to to reset any component like:

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

The above code will work when bootstrap is loaded after JQueryUI

Ref: http://getbootstrap.com/javascript/

Here is relevant code from Bootstrap:

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) {
    ....
  }

  $.fn.tooltip.noConflict = function () {
    $.fn.tooltip = old
    return this
  }

Bootstrap 4.3.0 Tooltip Conflicts with jQuery UI 1.12.1

Looks like the jQuery UI Tooltip & Bootstrap Tooltip collision is the issue, discussed here,

jQueryUI Tooltips are competing with Twitter Bootstrap

The solution is to link Bootstrap Bundle AFTER jQuery UI,

https://stackoverflow.com/a/26476505/1005607

jquery ui tooltip conflict with bootstrap 3 tooltip

Just include what you need from jquery-ui! Go to http://jqueryui.com/download/ and only select the things you really use (without tooltip obviously).

How to Avoid conflict between jquery UI and Bootstrap

This might help you jquery-ui-bootstrap
Also look at jQuery.noConflict().

---

Related Topics