21

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.

creimers
  • 4,975
  • 4
  • 33
  • 55
lbrahim
  • 3,710
  • 12
  • 57
  • 95
  • Do you wish to use both or only Bootstrap one? – closure May 02 '14 at 12:34
  • 4
    you can download jQueryUI without the `tooltip` code, just download what you really want on their [custom download page](https://jqueryui.com/download/). Or, you need to have a script between the library calls to `null` the previous method. – balexandre May 02 '14 at 12:36
  • @closure I need reference to both of the them in the same view but I wish to use only Boostrap's Tooltip. – lbrahim May 02 '14 at 12:36
  • @balexandre Thanks. custom one is a good solution. Could you please elaborate on your 2nd suggestion i.e. `Or, you need to have a script between the library calls to null the previous method.` maybe with an example please. – lbrahim May 02 '14 at 13:11
  • 2
    @Md.lbrahim here is your example with **jQueryUI Tooltip and Bootstrap Tooltip in the same page**: http://jsbin.com/bihazugo/1/ - **ADDED:** with a bit of search you can see the same answer applied: http://stackoverflow.com/a/19247955/28004 – balexandre May 02 '14 at 13:28
  • @balexandre Thank you for going through the trouble. I glanced over that thread but could not make sense. – lbrahim May 02 '14 at 13:34

4 Answers4

45

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
  }
closure
  • 7,412
  • 1
  • 23
  • 23
  • Thanks it does work but a little weird. Check it out [here](jsfiddle.net/zPAm7/1/). It works if I still keep the call to `tooltip()` should not `bootstrapTt` encapsulate bootstrap's tooltip functionality now? – lbrahim May 02 '14 at 13:23
  • Tooltip should be pointing to JQueryUI after noConflict while bootstrapTooltip points to bootstrap. I am not sure of how JQueryUI tooltip looks. I have edited the answer to give to relevant snippet of code from BootStrap. – closure May 02 '14 at 13:35
  • I am sorry my previous sample was wrong. I was not overriding on `tooltip`. Please take a look at the updated fiddle. Now it does not work at all. http://jsfiddle.net/zPAm7/2/ – lbrahim May 02 '14 at 13:58
  • Changed tooltip.destroy to $element.bootstrapTt("destroy"). it is working now. http://jsfiddle.net/zPAm7/3/ – closure May 02 '14 at 16:50
  • I have to agree that using a jquery-ui build without tooltip is the way to go. hard to imagine why you would need both in the same project, and putting something in just to take it out later is wasteful and inelegant. – David Feb 23 '18 at 18:17
4

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>
supersan
  • 5,671
  • 3
  • 45
  • 64
1

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

Ankita Mehta
  • 442
  • 3
  • 16
0

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']" ) );
Saurabh Misra
  • 491
  • 7
  • 14