Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip conflict with jQuery UI #6303

Closed
billmn opened this issue Dec 17, 2012 · 36 comments

Comments

@billmn
Copy link
Contributor

commented Dec 17, 2012

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

This comment has been minimized.

Copy link

commented Dec 17, 2012

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

@billmn

This comment has been minimized.

Copy link
Contributor Author

commented Dec 17, 2012

@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

This comment has been minimized.

Copy link
Contributor

commented Dec 18, 2012

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

@meleyal

This comment has been minimized.

Copy link
Contributor

commented Dec 18, 2012

noConflict was added in a7eb9c2

@billmn

This comment has been minimized.

Copy link
Contributor Author

commented Dec 18, 2012

@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

This comment has been minimized.

Copy link
Contributor

commented Dec 18, 2012

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

@billmn

This comment has been minimized.

Copy link
Contributor Author

commented Dec 20, 2012

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

This comment has been minimized.

Copy link
Contributor

commented Dec 20, 2012

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

@billmn

This comment has been minimized.

Copy link
Contributor Author

commented Dec 20, 2012

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

This comment has been minimized.

Copy link

commented Jan 2, 2013

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

@billmn

This comment has been minimized.

Copy link
Contributor Author

commented Jan 7, 2013

Any news about that?

@sobit

This comment has been minimized.

Copy link

commented Jan 8, 2013

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

This comment has been minimized.

Copy link
Contributor Author

commented Jan 8, 2013

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

@ehudokai

This comment has been minimized.

Copy link

commented Jan 19, 2013

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

This comment has been minimized.

Copy link

commented Jan 24, 2013

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

This comment has been minimized.

Copy link
Contributor

commented Jan 25, 2013

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

This comment has been minimized.

Copy link

commented Jan 25, 2013

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 fat closed this Feb 6, 2013
@fat fat reopened this Feb 6, 2013
@fat

This comment has been minimized.

Copy link
Member

commented Feb 6, 2013

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

This comment has been minimized.

Copy link

commented Dec 1, 2013

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

This comment has been minimized.

Copy link

commented Jan 24, 2014

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

Bootstrap 3.0
Jquery-UI 1.9.2.min.js

@hnrch02

This comment has been minimized.

Copy link
Collaborator

commented Jan 24, 2014

@Rarst

This comment has been minimized.

Copy link

commented Jan 30, 2014

@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

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2014

@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

This comment has been minimized.

Copy link

commented Jan 30, 2014

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

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2014

And you get the following error message?

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

@Rarst

This comment has been minimized.

Copy link

commented Jan 30, 2014

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

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2014

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

@Rarst

This comment has been minimized.

Copy link

commented Jan 30, 2014

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

@hnrch02

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2014

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

@Rarst

This comment has been minimized.

Copy link

commented Jan 30, 2014

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

This comment has been minimized.

Copy link

commented Jan 30, 2014

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

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2014

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

This comment has been minimized.

Copy link

commented Jan 30, 2014

Done and done.

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

@hnrch02

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2014

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

This comment has been minimized.

Copy link

commented Jan 31, 2014

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

This comment has been minimized.

Copy link
Collaborator

commented Feb 10, 2014

Refs: #11966 #11464

@seiyria seiyria referenced this issue Feb 24, 2014
@twbs twbs locked and limited conversation to collaborators Jun 9, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.