Tooltip conflict with jQuery UI

[billmn]

Does exists a method to avoid the conflict between Bootstrap's Tooltips and jQuery UI Tooltip method?

I know that I can download jQuery UI without the tooltip component ... but if I would have this component too ... is possible to have tooltips working together?

Bootstrap 2.2.2
jQuery UI 1.9.2

( sorry for the bad english :-) )

[tnorthcutt]

@billmn Can you provide more details about what the conflict is?

[billmn]

@tnorthcutt That tooltip function no longer works.

jQuery UI tooltip ( http://jqueryui.com/tooltip/ ) overwrite the Bootstrap tooltip because, I think, use the same namespace and same function name

[Yohn]

I believe the bootstrap guys put in a no conflict clause in the current version of bootstrap that should fix this

[meleyal]

noConflict was added in a7eb9c2

[billmn]

@meleyal Can you explain me how to use noConflict?

I've tried to use the example from the docs ( http://twitter.github.com/bootstrap/javascript.html ) :

var bootstrapButton = $.fn.button.noConflict()
$.fn.bootstrapBtn = bootstrapButton 

but I get :

TypeError: $.fn.button.noConflict is not a function

I've checked into bootstrap.min.js and there is :

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

Why? What did I do wrong?

[meleyal]

Try this, the last log of $.fn.button should be the jquery-ui version: http://jsfiddle.net/meleyal/4G5eu/

[billmn]

Yeah ... the first console.log($.fn.button); in firebug link to jQuery UI.

I've to run this before including jQuery UI to solve the problem?

var bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;
var bootstrapTooltip = $.fn.tooltip.noConflict();
$.fn.bootstrapTlp = bootstrapTooltip;

Is it the right way?

[meleyal]

Include jquery-ui first, then bootstrap, then the noConflict code.

[billmn]

I've tried this : http://jsfiddle.net/nwX2E/

Now I can have tooltip functions (Bootstrap and jQuery UI) but $('#example').bstooltip() doesn't work
I dont have any error in console

var bootstrapTooltip = $.fn.tooltip.noConflict();
$.fn.bstooltip = bootstrapTooltip;
// bootstrapTooltip => Bootstrap; $.fn.tooltip => jQuery UI Tooltip
console.log(bootstrapTooltip, $.fn.tooltip);
$('#example').bstooltip();

[sobit]

+1
I also trying to use bstooltip function but it doesn't work. However, I can see it's object in developer console.

[billmn]

Any news about that?

[sobit]

I couldn't use Bootstrap's noConflict() method. What I did was downloading and using custom package of jQuery UI which doesn't have tooltips in it. That's not perfect because I'm using PHP Framework and I was needed to override using in-built copy with the custom one.

[billmn]

Sure I've used this method too ... But it's not the best thing. :)

[ehudokai]

After fighting with it for a while. I'm coming to the conclusion that the bootstrap tooltip noConflict doesn't work :(

Was it ever tested?

Using the noConflict method to rename the bootstrap tooltip function causes the tooltip code to throw a lot of errors.

I have found a variety of reasons for this, although I don't think I've found them all.

1. on line 267 the code defines $.fn.tooltip.defaults, which is then used later on line 62 to pull in those defaults. This one can be solved by simply moving the defaults to the Tooltip object, and referencing them as this.defaults instead of the convoluted $.fn[this.type].defaults, which would work, IF this.type got updated some how by the noConflict method, but it doesn't :(
2. this.type in the Tooltip object is hardcoded to be 'tooltip'. The noConflict method doesn't take care of this problem. This problem is the cause of problem 1. This leads to other problems since there no longer exists all of the objects that were put into the $.fn.tooltip object. Lines 75 and 87 threw errors after I fixed problem 1 because again of the use of this.type which is hardcoded to tooltip :(.

I feel like if I stare at this long enough I'll be able to untangle it and make the noConflict usable, but since I didn't write it and there's little documentation in the code, I am struggling.

My original problem is that we are using jquery tools which has its own tooltip method and the two don't play nice despite the attempt to add an ineffectual noConflict method.

If someone can help me understand what's happening on lines 75 and 82, and why they are necessary instead of just pulling either data from the element, or using the Tooltip objects built in options property, I might be able to unravel this a little more.

Hope my thoughts were helpful.

Thanks,

[ehudokai]

As you can see above, I created a patch to get the noConflict method working. Since the plugin does a lot of looking at the $.fn.tooltip, I had to change the noConflict method to specify the new name so the plugin code would know where to look and what to load. It's a little bit hacky, but it works. I've done a pull request, but if you need it sooner you can get it from my fork.

[dzwillia]

It should be noted that jQuery UI also provides a simple workaround via $.widget.bridge():

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

[ehudokai]

Very cool! As I said in my first post, my issue is with jquery tools. I know this issue was originally with jquery ui, but my patch solves conflicts with any other .tooltip plugin.

[fat]

yeah tooltip noconflict is currently broke – for now id' just use the jquery bridge which seems to be working. I'm going to wait to fix this noconflict issue for 3.0 because it will require a bit of a refactor and i don't want to stress about backwards compatibility, thanks

[Rarst]

Is this considered fixed? I am getting

Uncaught TypeError: Property 'tooltip' of object [object Object] is not a function

on lines 107, 122 when trying to use tooltip noconflicted and not sure if it's me doing it wrong (sorry, not good at JS) or it was never resolved in 3.0 as planned.

[svscorp]

Same here: ... has no method 'noConflict'

Bootstrap 3.0
Jquery-UI 1.9.2.min.js

[hnrch02]

@svscorp Works fine for me http://jsfiddle.net/24TPJ/

[Rarst]

@hnrch02

If I understand your fiddle it demonstrates that noConflict() call correctly restores the previous functionality - which does work.

What is broken is trying to use noConflict-ed BS tooltip instance (bsTooltip in your fiddle).

[hnrch02]

@Rarst To function properly, $.fn.tooltip needs to be fed an jQuery object. To accomplish that, you could either use something similar to this, where you create a function whose this context is set to an jQuery object (definitely not recommending this approach), or just assign the value returned by noConflict() to $.fn so it looks something like this.
So, nothing's broken here.

[Rarst]

Yes, I have been trying latter and shoot me I cannot make it work in my code (getting above mentioned error).

My code is along:

jQuery(document).ready(function () {                             
    jQuery.fn.lapstooltip = jQuery.fn.tooltip.noConflict();         
    jQuery(".laps-timeline .event").lapstooltip({                   
        container: '#wpadminbar', placement: 'bottom', html: true      
    });                                                             
});                                                              

[hnrch02]

And you get the following error message?

Uncaught TypeError: Property 'tooltip' of object [object Object] is not a function

[Rarst]

Yes, on lines 107 and 122 of tooltip.js. Just now I tried to reproduce your fiddle in my environment and it breaks in exactly same way. Something goes wrong with it...

Does it matter that I am loading tooltip.js, not whole BS script?

[hnrch02]

Which exact version of tooltip.js are you using?
And no, it shouldn't matter.

[Rarst]

Trying with 3.0.3 right now. jQuery 1.10.2 (noconflicted), jQuery Migrate 1.2.1

[hnrch02]

Could you try and replace the content of your tooltip.js file with this and see if the error persists?

[Rarst]

Error changed to:

Uncaught TypeError: Expecting a function in instanceof check, but got #<Object>

I am going to try starting with empty html and add stuff step by step...

[Rarst]

Here is live example with nothing else in it http://www.rarst.net/tooltip.xhtml I can't make sense why/how fiddle works, but not this.

[hnrch02]

Well, first of all, you are missing the Bootstrap CSS in your example.
Could you also please include the unminified JavaScript version of bootstrap.js?

[Rarst]

Done and done.

PS now having power blackout, so world is definitely conspiring hard against me on this. :)

[hnrch02]

Oh, of course, how could I be this blind 😃
If you use noConflict() $.fn.tooltip will reset to the old value. In your example there is no value, so it is undefined. That's where the error is coming from. Why? Because if the object passed to Tooltip.prototype.enter is not an instance of Tooltip, it will be instantiated by selecting the currentTarget and trying to execute whatever is behind $.fn.tooltip, because the property (of $.fn) which should be executed is selected based on the type of the tooltip (either tooltip or popover).

So what it's doing is:

$(obj.currentTarget)[this.type]()

which equals (in the case of a tooltip)

$(obj.currentTarget).tooltip()

even though $.fn.tooltip no longer corresponds to Bootstrap's tooltip plugin.

I could do a PR on this but maybe @fat or someone else from the team wants to handle this, as it is a rather delicate topic.

[Rarst]

I hadn't got much of what you said :), but I think it can be concluded:

1. There is an issue with noConflict()
2. It manifests when there was no plugin occupying tooltip before BS
3. It matters in use cases like mine, where environment is unknown (I am shipping tooltip.js in public WordPress plugin)

Thank you for your help and hope to see this resolved! So far I had to settle for editing script to have it occupy non-generic name.

[hnrch02]

Refs: #11966 #11464