CODEWITHSUNDEEP
jquerymootools
Danny
Danny

Reputation: 53

jQuery conflict with other library (MooTools)

I'm having trouble implementing a small javascript that uses jQuery. The code is

$(document).ready(function () {
     $("span.question").hover(function () {
         $(this).append('<div class="tooltip"><p>This is a tooltip. It is typically used to explain something to a user without taking up space on the page.</p></div>');
     }, function () {
         $("div.tooltip").remove();
     });
 });

I've seen similar posts where the problem was said to be caused by a mootools javascript conflict. So I replaced each instance of '$' with 'jQuery' but the script still does nothing and no errors are shown in the firebug console. Would someone be able to indicate to me what the problem is? Thanks.

Upvotes: 0

Views: 1055

Answers (2)

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

Read this documentation.

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

So you need to move the control back to jQuery. Then you will have to use jQuery instead of '$'.

<script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function($) {
        jQuery("span.question").hover(function () {
            jQuery(this).append('<div class="tooltip"><p>This is a tooltip. It is typically used to explain something to a user without taking up space on the page.</p></div>');
        }, function () {
            jQuery("div.tooltip").remove();
        });
     });
</script>

NOTE: And do confirm that jQuery is only included once.

EDIT: I forgot to close .ready function. I fixed that. Here is a fiddle link to see how it works.

Upvotes: 2

bgusach
bgusach

Reputation: 15185

Try to write at the beginning of your code:

jQuery.noConflict()

Upvotes: 0

Related Questions