CODEWITHSUNDEEP
jquerywordpressjquery-tooltip
Phillip Mclauren
Phillip Mclauren

Reputation: 417

jQuery.min.js file conflict

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.

Upvotes: 0

Views: 1809

Answers (1)

alesub
alesub

Reputation: 1492

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.

Upvotes: 2

Related Questions