Tooltip Help Please!

Tooltip Help Please!

Hello, this is my first post here! I'd really appreciate it if someone could help me out with this! I've only just started learning javascript and jquery and would like to be able to edit a script but i'm nowhere near that level.

Basically what i've got is ithis:

  1.     <a style="cursor: pointer;" class="addspeech" rel="#name1">
  2.     <a style="cursor: pointer;" class="addspeech" rel="#name2">

Which points to:

  1.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  2.     <script src="script/speechbubbles.js"></script>
  3.     <script type="text/javascript">
  4.     jQuery(function($){ //on document.ready
  5.             //Apply tooltip to links with class="addspeech", plus look inside 'speechdata.txt' for the tooltip markups
  6.         $('a.addspeech').speechbubble({url:'speechdata.txt'})
  7.     })
  8.     </script>

That then points to the following script:

  1.     var speechbubbles_tooltip={
  2.         loadcontent:function($, selector, options, callback){
  3.             var ajaxfriendlyurl=options.url.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
  4.             $.ajax({
  5.                 url: ajaxfriendlyurl, //path to external content
  6.                 async: true,
  7.                 error:function(ajaxrequest){
  8.                     alert('Error fetching Ajax content.<br />Server Response: '+ajaxrequest.responseText)
  9.                 },
  10.                 success:function(content){
  11.                     $(document.body).append(content)
  12.                     callback(selector)
  13.                     $(content).remove()
  14.                 }
  15.             })
  16.         },
  17.         buildtooltip:function($, setting){
  18.         var speechtext=(setting.speechid)? $('div#'+setting.speechid).html() : setting.speechtext
  19.         if (speechtext){
  20.             $speech=$('<div class="speechbubbles">'+speechtext+'</div>').appendTo(document.body)
  21.             $speech.addClass('speechbubbles').append('<div class="speechbubbles-arrow-border"></div>\n<div class="speechbubbles-arrow"></div>')
  22.             $speech.data('$arrowparts', $speech.find('div.speechbubbles-arrow, div.speechbubbles-arrow-border')) //store ref to the two arrow DIVs within tooltip
  23.             var arrowheight=(window.XMLHttpRequest)? $speech.data('$arrowparts').eq(0).outerHeight() : 10
  24.             $speech.data('measure', {w:$speech.outerWidth(), h:$speech.outerHeight()+arrowheight, arroww:$speech.data('$arrowparts').eq(0).outerWidth()}) //cache tooltip dimensions
  25.             $speech.css({display:'none', visibility:'visible'})
  26.             setting.$speech=$speech //remember ref to tooltip
  27.         }
  28.         return setting.$speech
  29.         },
  30.        
  31.         positiontip:function($, $anchor, s, e){
  32.             var $speech=s.$speech
  33.             var $offset=$anchor.offset()
  34.             var windowmeasure={w:$(window).width(), h:$(window).height(), left:$(document).scrollLeft(), top:$(document).scrollTop()} //get various window measurements
  35.             var anchormeasure={w:$anchor.outerWidth(), h:$anchor.outerHeight(), left:$offset.left, top:$offset.top} //get various anchor link measurements
  36.             var speechmeasure={w:$speech.data('measure').w, h:$speech.data('measure').h} //get tooltip measurements
  37.             var x=anchormeasure.left
  38.             var y=anchormeasure.top+anchormeasure.h
  39.             x=(x+speechmeasure.w>windowmeasure.left+windowmeasure.w-10)? x-speechmeasure.w+anchormeasure.w-15 : x //right align tooltip if no space to the right of the anchor
  40.            
  41.             var isrightaligned=x!=anchormeasure.left //Boolean to indicate if tooltip is right aligned
  42.             var istopaligned=y!=anchormeasure.top+anchormeasure.h+10 //Boolean to indicate if tooltip is top aligned
  43.            
  44.            
  45.             var speechcss_before={opacity:0, left:x, top:(istopaligned)? y-speechmeasure.h-10 : y+speechmeasure.h+10}
  46.             var speechcss_after={opacity:1, top:y+10}
  47.             if (document.all && !window.msPerformance){ //detect IE8 and below
  48.                 delete speechcss_before.opacity //remove opacity property, as IE8- does not animate this property well with CSS triangles present
  49.                 delete speechcss_after.opacity
  50.             }
  51.             $speech.css(speechcss_before).show().animate(speechcss_after)
  52.         },
  53.         init:function($, $anchor, options){
  54.             var s={speechtext:$anchor.attr('title'), speechid:$anchor.attr('rel')}
  55.             $.extend(s, options)
  56.             if (this.buildtooltip($, s)){
  57.                 if (s.speechtext) //if title attribute of anchor is defined
  58.                     $anchor.attr('title', "") //disable it
  59.                 $anchor.click(function(e){
  60.                     if (s.$speech.queue().length==0){
  61.                         clearTimeout(s.hidetimer)
  62.                         speechbubbles_tooltip.positiontip($, $anchor, s, e)
  63.                     }
  64.                 })
  65.                 $speech.click(function(e){
  66.                     s.hidetimer=setTimeout(function(){s.$speech.stop(true,true).hide()}, 200)
  67.                 })
  68.             }
  69.         }
  70.     }
  71.     jQuery.fn.speechbubble=function(options){
  72.         var $=jQuery
  73.         function processanchor(selector){
  74.             return selector.each(function(){ //return jQuery obj
  75.                 var $anchor=$(this)
  76.                     speechbubbles_tooltip.init($, $anchor, options)
  77.             })
  78.         }
  79.         if (options && options.url)
  80.             speechbubbles_tooltip.loadcontent($, this, options, processanchor)
  81.         else
  82.             processanchor(this)
  83.     };

As you can see, 4 lines down from "buildtooltip:function($, setting){" is "(<div class="speechbubbles">)" which points to the class inside the CSS. What I have in there is "div.speechbubbles" and "div.speechbubbles2". So what I want is to be able to style these individually using speechbubbles and speechbubbles2:

  1.     <a style="cursor: pointer;" class="addspeech" rel="#name1">
  2.     <a style="cursor: pointer;" class="addspeech" rel="#name2">

I should probably point out that the reason of doing the tooltip this way was so that I could put the contents of the tooltips inside an external file that I could keep blocked from crawlers, basically so that the contents of it aren't indexed. Only viewable by the user. But i'd like to be able to style those 2 differently...
I can get both of them styled as 1 or the other, but not 1 of each.