jQuery Forum

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.