jQuery.min.js file conflict

Question

I have a WordPress tooltip script installed and this script uses jQuery.min.js file which is placed in my header.php and footer.php both files. By doing this, My website layout is totally disturbed and other jQuery plugins are not working properly. And I f I remove any of this jQuery.min.js file (whether from footer.php or header.php), the tooltip doesn't work anymore.

Please help me.

My Header.php code for tooltips is:

<!-- Scripts -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>

        <!-- aToolTip js -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.atooltip.js"></script>

        <!-- aToolTip js -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.atooltip.min.js"></script>

        <!-- Scripts -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.atooltip.pack.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a.normalTip').aToolTip();


                $('a.fixedTip').aToolTip({
                    fixed: true
                });

                $('a.clickTip').aToolTip({
                    clickIt: true,
                    tipContent: 'Follow me on Instagram! @roomno11'
                    closeTipBtn: 'aToolTipCloseBtn',
                    persistent: true,
                });     

                $('a.callBackTip').aToolTip({
                    clickIt: true,
                    onShow: function(){alert('I fired OnShow')},
                    onHide: function(){alert('I fired OnHide')}
                });


            }); 
        </script>

and the same code is in footer.php file:

<!-- Scripts -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>

        <!-- aToolTip js -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.atooltip.js"></script>

        <!-- aToolTip js -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.atooltip.min.js"></script>

        <!-- Scripts -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.atooltip.pack.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a.normalTip').aToolTip();


                $('a.fixedTip').aToolTip({
                    fixed: true
                });

                $('a.clickTip').aToolTip({
                    clickIt: true,
                    tipContent: 'Follow me on Instagram! @roomno11'
                    closeTipBtn: 'aToolTipCloseBtn',
                    persistent: true,
                });     

                $('a.callBackTip').aToolTip({
                    clickIt: true,
                    onShow: function(){alert('I fired OnShow')},
                    onHide: function(){alert('I fired OnHide')}
                });


            }); 
        </script>

Please help me.

Plus Sorry for my poor English. I hope you understand this.

Do you have any other JavaScript libraries? What error messages are displayed in the console? — BenM, Sep 25 '12 at 14:41
You need to remove it from either the footer or the header, it shouldn't be in both. — Kevin B, Sep 25 '12 at 14:45
Can we see your code in action anywhere? Is it publicly available? If so, add a link. — davehale23, Sep 25 '12 at 21:52

score 2 · Accepted Answer · answered Sep 26 '12 at 00:29

First of all, check if wordpress is already including jquery. It should, since you're mentioning that there are other plugins trying to use it.

Then, remove the jquery.min.js call from the header and the footer if present, and replace $() instructions with jQuery(). For example, now you have

$(function(){
                $('a.normalTip').aToolTip();

It should be

jQuery(function(){
                jQuery('a.normalTip').aToolTip();

This is because jquery is always included in conflict mode "on", to avoid conflicts with any other javascript library.

jQuery.min.js file conflict

1 Answers1