jQueryUI Tooltips are competing with Twitter Bootstrap

Question

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?

Yes... it seems like the Bootstrap.js stuff relies (at least in part) on the jQueryUI stuff. Without jQuery, the Bootstrap stuff won't work. — markdotnet, Dec 05 '12 at 20:46
This worked for me, checkout this [answer](http://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-competing-with-twitter-bootstrap/22087252#22087252) — Poncho, Feb 28 '14 at 05:51
@markdotnet: incorrect. Bootstrap requires the core JQuery library, *not* JQuery.UI. — Ian Kemp, Feb 18 '15 at 12:46

score 204 · Answer 1 · edited Sep 21 '22 at 16:16

204

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):

$.widget.bridge('uitooltip', $.ui.tooltip);

So the code to make it work:

<!-- Import jQuery and jQuery UI first -->
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery-ui.js"></script>

<script>
  // Resolve name collision between jQuery UI and Twitter Bootstrap
  $.widget.bridge('uitooltip', $.ui.tooltip);
</script>

<!-- Then import Bootstrap -->    
<script src="js/bootstrap.js"></script>

JQuery tooltips can then be instantiated in the following way:

$('.someclass').uitooltip();

Nice copy paste code that also handles the button conflict:

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

<script>
  $.widget.bridge('uibutton', $.ui.button);
  $.widget.bridge('uitooltip', $.ui.tooltip);
</script>

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

edited Sep 21 '22 at 16:16

Abdull

26,371
26
130
172

answered Oct 08 '13 at 12:40

The Demz

7,066
5
39
43

1

I get a js error when I try this. `'undefined' is not an object (evaluating '$.widget.bridge')` – covard Nov 13 '13 at 20:10
2

covar - did you make sure that you got all the src scripts imported? And are you using the newer versions of the libs? – The Demz Nov 14 '13 at 10:27
1

@covard: It's important that you first import jquery-ui, then do the `bridge` thing, and then import bootstrap. – Joshua Muheim Jun 24 '14 at 09:01
2

a solution which is a pain if you have everything bundled and minified.. there is not way to put this script inbetween somehow.. dammit, name collision rubbish. – Piotr Kula Dec 02 '15 at 10:53
Usage: $('#element').uitooltip() – gadelat Mar 02 '16 at 14:28
2

if you are using webpack bundles with minified code you can simply put jquery-ui before bootstrap.js – Raj Jun 24 '17 at 05:54
This may seem redundant but I thought I'd mention this to help any intermediate ASP.Net MVC folks who have this problem. This solution worked great for me. Here are the changes I had to make to my Layout.cshtml page: ` @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Scripts.Render("~/bundles/bootstrap") ` – Eric C. Berridge Feb 23 '19 at 19:26
**Year 2020 Solution**: Hi, I am using Bootstrap 4.5 with jQuery UI 1.12.1 and I had the same issue that the Bootstrap tooltips appeared in the jQuery-UI look-and-feel. I just reversed the order of loading the .js files: first I load the jQuery-UI, then Bootstrap, that already solved it! – basZero Oct 15 '20 at 10:16

score 78 · Answer 2 · answered Oct 20 '14 at 23:18

78

A simple solution is to load bootrap.js after jquery-ui.js, so that the bootstrap .tooltip method takes precedence.

answered Oct 20 '14 at 23:18

Stefan Musarra

1,429
14
16

2

This worked for me and is the easiest way. I recommend adding an HTML comment stating that one library has to be loaded after the other. – Paul Jun 27 '15 at 14:37
4

One day you will be missing close-icon in dialogs by using such approach. https://stackoverflow.com/questions/17367736/jquery-ui-dialog-missing-close-icon – Oleksii Kyslytsyn Nov 21 '17 at 20:13
This solution didn't work for me. Using Chrome, I would "clear cache and hard refresh" the page and the tooltip would sometimes work and then sometimes not (no error in console.log). Refreshing 30 times produced working results 7 times. I then went and downloaded a customized jQuery UI package and now when I "clear cache and hard refresh" 30 times, I get working results 30 times with 0 errors. I would also add that I'm using require.js so I can easily control the order in which libraries are loaded. – HPWD Apr 18 '18 at 20:50
I LOVE YOU for this simplest logical fix – Milind Apr 25 '19 at 22:09

score 38 · Answer 3 · edited Dec 28 '18 at 09:47

38

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.

edited Dec 28 '18 at 09:47

Dave Patrick

278
3
8

answered Aug 04 '16 at 22:12

supersan

5,671
3
45
64

1

in your solution ui tooltip will be overwritten with bootstrap but if any body do not want to overwrite have to use previous solution – Projesh Pal Jun 07 '17 at 07:22
One day you will be missing close-icon in dialogs by using such approach. https://stackoverflow.com/questions/17367736/jquery-ui-dialog-missing-close-icon – Oleksii Kyslytsyn Nov 21 '17 at 20:12
great solution! – Ivan Ferrer Dec 20 '17 at 18:21
Much cleaner solution. I was fixing a page that had the bootstrap loaded in the (shared) layout page, and then the jquery-ui was on the individual page. I didn't want to add jquery-ui to all of the pages (layout) just to get the order right. Still some trouble with the jquery-ui (I assume) css overriding the bootstrap css (the font is huge, and the tooltip has a white block around it). but much closer. – FinrodFelagund Dec 16 '21 at 14:51

score 33 · Answer 4 · answered Feb 28 '14 at 05:46

33

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!

answered Feb 28 '14 at 05:46

Poncho

746
1
6
12

1

So you still download asset files from each side per hand instead of using a tool like bower? How do you install third party libraries in general? Search in google for and download it from any site? – user3746259 Jul 28 '15 at 18:20
how about I dont want to use bootstrap tooltip but the UI one instead.. they the ones causing the issue any way. – Piotr Kula Dec 02 '15 at 10:57
2

Simple, easy, worked great for my situation. Thank you! +1 – Chris Kempen Jan 24 '16 at 19:22
Worked for me - have really been banging my head over this - plus one - thank you – gchq Mar 16 '17 at 15:48
The most reasonable answer, as long as it suggest to take only the required functionality. Thanks – Oleksii Kyslytsyn Nov 21 '17 at 20:14
Just means that you can't use a CDN unfortunately – jg2703 Feb 06 '18 at 17:25

score 23 · Answer 5 · answered Jun 09 '16 at 12:34

23

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();

answered Jun 09 '16 at 12:34

Projesh Pal

448
4
12

[Official way](https://getbootstrap.com/docs/4.0/getting-started/javascript/#no-conflict) `$.fn.bstooltip = $.fn.tooltip.noConflict();` – Igor Jerosimić Apr 29 '20 at 07:29

score 11 · Answer 6 · answered Dec 17 '13 at 09:41

11

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.

answered Dec 17 '13 at 09:41

AgonyOfVictory

164
1
4

3

Like this, very pragmatic – Mark Stratmann Mar 19 '15 at 17:32
Thanks for the tip, I agree, it's a workaround that avoids all complexity. – Tom Mar 24 '15 at 19:04
Ja man, dis one solves all the nightmares out and is looking shweet like a lemon! – Piotr Kula Dec 02 '15 at 11:00
Doesn't popovers require tooltip as pre-req? – MrKobayashi Jan 21 '19 at 15:43

score 10 · Answer 7 · answered Jun 04 '13 at 03:25

10

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);

answered Jun 04 '13 at 03:25

Public Profile

1,817
1
21
20

score 3 · Answer 8 · answered Dec 05 '12 at 20:15

3

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).

answered Dec 05 '12 at 20:15

Matt

1,213
14
39

So this is weird... I'm loading the javascript libraries in the same order but when I was having the problem, I was loading the jquery-ui library before my tag and the bootstrap.js after all my content. I moved the bootstrap.js above my content (but still after the jquery-ui.js) and now it's rendering the tooltips like I'd expect. I hope this doesn't mess up the universe of my website. I thought it was best practice to load the javascript you could after the content for performance reasons... weird. – markdotnet Dec 05 '12 at 20:35
it is best practice. Maybe the bootstrap needs to be at the top? – Matt Dec 06 '12 at 14:48
Bootstrap JS definitely doesn't need to be at the top of the page. – Paul Phillips Oct 27 '14 at 17:08

score 3 · Answer 9 · answered Aug 22 '17 at 14:01

3

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.

answered Aug 22 '17 at 14:01

Sanjib Debnath

3,556
2
22
16

1

One day you will be missing close-icon in dialogs by using such approach. https://stackoverflow.com/questions/17367736/jquery-ui-dialog-missing-close-icon – Oleksii Kyslytsyn Nov 21 '17 at 20:12
it will overrides all common properties of ui with bootstrap min and cannot use both if needed – Projesh Pal Nov 28 '17 at 10:43

score 1 · Answer 10 · answered Jun 30 '17 at 23:14

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' ]
        },...

score 1 · Answer 11 · answered Jun 08 '21 at 07:52

1

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

answered Jun 08 '21 at 07:52

Aadam

1,521
9
30
60

score 1 · Answer 12 · answered Feb 18 '22 at 16:09

In case you...

Don't want to load bootstrap after jQuery UI and
$.widget.bridge and noConflict don't work for you and
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']" ) );

score 0 · Answer 13 · answered Aug 05 '22 at 11:40

Assuming that UI will called after Bootsrap initialized (and you cannot change the order Bootstrap >> UI), put after bootstrap import:

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

Then after all:

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

So when you'll use $(".selector").tooltip() it would be the Bootstrap ones. And you can still use the UI version with $(".selector").uitooltip().

jQueryUI Tooltips are competing with Twitter Bootstrap

13 Answers13

Linked