CODEWITHSUNDEEP
javascriptjquerycssjquery-uitwitter-bootstrap-3
lbrahim
lbrahim

Reputation: 3810

Bootstrap and jQueryUI Conflict

I am trying to use tooltip on a View that has reference to both jQueryUI and Bootstrap 3. I have made a sample here. If I load the Boostrap after jQueryUI's js then the tooltip() call is successful but if I call jQueryUI after Bootstrap then I get an error and nothing works. You can try it out yourself. There is a lot of talk going on about this on the Internet and I asked around GitHub but I could not find a solution yet.

Upvotes: 22

Views: 44285

Answers (4)

Saurabh Misra
Saurabh Misra

Reputation: 539

I have posted a relevant answer with more details in this SO thread: https://stackoverflow.com/a/71176542/1932141

Basically, you can do something like this:

<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']" ) );

Upvotes: 0

Ankita Mehta
Ankita Mehta

Reputation: 452

the simplest solution is put jquery-ui.js first and then bootstrap-datepicker.js this works for me.

Upvotes: 1

supersan
supersan

Reputation: 6141

Instead of including jquery-ui.js, include individual libraries as needed and leave out jquery-ui tooltip.

For example if all you need is jquery-ui sortable then use this:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>

Upvotes: 4

closure
closure

Reputation: 7452

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
  }

Upvotes: 46

Related Questions