JqueryTools conflict

Question

I am trying to create this tooltip sample for my wordpress it works just fine but as soon as I integrated it in wordpress I can't get the tooltip to show up. The page where I want to work is here

ok I did a little experiment this is test versionand this is the wordpress version. The test version is the code when you do a view source a save it all and uploaded it and the tooltip worked! But the wordpress version doesn't work.. now that is both the same but one is working and the other one is not.

here is the JQuery codes:

Header

    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js" type="text/javascript"/></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
</script>

Footer

<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready

$(document).ready(function() {

    // enable tooltip for "download" element. use the "slide" effect
    $("#download_now").tooltip({ effect: 'slide'}); 
});
</script>

and this is what Wordpress generates(this is from a view source)

    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js" type="text/javascript"/></script>
    <script type='text/javascript' src='http://www.testground.idghosting.com/philcom/wp-includes/js/jquery/jquery.js?ver=1.3.2'&gt;&lt;/script&gt;
<script type="text/javascript">
var $ = jQuery.noConflict();
</script>

    <script type='text/javascript'>
            $j=jQuery.noConflict();   


            $j(document).ready( function() {
               initCalendar();
            });

            function initCalendar() {
                $j('a.prev-month').click(function(e){
                    e.preventDefault();
                    tableDiv = $j(this).parents('table').parent();
                    ($j(this).hasClass('full-link')) ? fullcalendar = 1 : fullcalendar = 0;   
                    prevMonthCalendar(tableDiv, fullcalendar);
                } );
                $j('a.next-month').click(function(e){
                    e.preventDefault();
                    tableDiv = $j(this).parents('table').parent();
                    ($j(this).hasClass('full-link')) ? fullcalendar = 1 : fullcalendar = 0;     
                    nextMonthCalendar(tableDiv, fullcalendar);
                } );
            }    
            function prevMonthCalendar(tableDiv, fullcalendar) {  
                if (fullcalendar === undefined) {
                    fullcalendar = 0;
                  }
                month_n = tableDiv.children('div.month_n').html();                                
                year_n = tableDiv.children('div.year_n').html();
                parseInt(month_n) == 1 ? prevMonth = 12 : prevMonth = parseInt(month_n,10) - 1 ; 
                if (parseInt(month_n,10) == 1)
                        year_n = parseInt(year_n,10) -1;
                $j.get("http://www.testground.idghosting.com/philcom", {ajaxCalendar: 'true', calmonth: prevMonth, calyear: year_n, full: fullcalendar}, function(data){
                    tableDiv.html(data);
                    initCalendar();
                });
            }
            function nextMonthCalendar(tableDiv, fullcalendar) {
                if (fullcalendar === undefined) {
                    fullcalendar = 0;
                  }
                month_n = tableDiv.children('div.month_n').html();                                
                year_n = tableDiv.children('div.year_n').html();
                parseInt(month_n,10) == 12 ? nextMonth = 1 : nextMonth = parseInt(month_n,10) + 1 ; 
                if (parseInt(month_n,10) == 12)
                        year_n = parseInt(year_n,10) + 1;
                $j.get("http://www.testground.idghosting.com/philcom", {ajaxCalendar: 'true', calmonth: nextMonth, calyear: year_n, full : fullcalendar}, function(data){
                    tableDiv.html(data);
                    initCalendar();
                });
            }

            // function reloadCalendar(e) {
            //  // e.preventDefault();
            //      console.log($j(this).parents('table'));
            //     $j.get("http://www.testground.idghosting.com/philcom", {ajax: 'true'}, function(data){
            //      tableDiv = table.parent();
            //      tableDiv.html(data);
            //             });
            // }
            //                      

        </script>

Answer 1

I think you are using $ instead of $j ?

<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready

$(document).ready(function() {
 // enable tooltip for "download" element. use the "slide" effect
 $("#download_now").tooltip({ effect: 'slide'});
});
</script> 

Answer 2

I ONLY use the HTML editor and I write my own <p> tags and <br /> and so forth... The problem I'm running into is that each time I use a special <span> with custom styling that I've made, WP is adding a <p> around that span as well as a <br /> after the paragraph.

Now the solution is to have the Formating disabled in Wordpress editor by downloading this plugin