3 Replies - 445 Views - Last Post: 22 February 2014 - 11:22 PM

#1 Lee_K  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 22-February 14

Tooltips style help please!

Posted 22 February 2014 - 02:06 PM

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. I've sort of done it, but there's just something i'm not getting right!

Basically what i've got is this:

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



Which points to:

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



That then points to the following script:

    var speechbubbles_tooltip={
        loadcontent:function($, selector, options, callback){
            var ajaxfriendlyurl=options.url.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/") 
            $.ajax({
                url: ajaxfriendlyurl, //path to external content
                async: true,
                error:function(ajaxrequest){
                    alert('Error fetching Ajax content.<br />Server Response: '+ajaxrequest.responseText)
                },
                success:function(content){
                    $(document.body).append(content)
                    callback(selector)
                    $(content).remove()
                }
            })
        },
        buildtooltip:function($, setting){
        var speechtext=(setting.speechid)? $('div#'+setting.speechid).html() : setting.speechtext
        if (speechtext){
            $speech=$('<div class="speechbubbles">'+speechtext+'</div>').appendTo(document.body)
            $speech.addClass('speechbubbles').append('<div class="speechbubbles-arrow-border"></div>\n<div class="speechbubbles-arrow"></div>')
            $speech.data('$arrowparts', $speech.find('div.speechbubbles-arrow, div.speechbubbles-arrow-border')) //store ref to the two arrow DIVs within tooltip
            var arrowheight=(window.XMLHttpRequest)? $speech.data('$arrowparts').eq(0).outerHeight() : 10
            $speech.data('measure', {w:$speech.outerWidth(), h:$speech.outerHeight()+arrowheight, arroww:$speech.data('$arrowparts').eq(0).outerWidth()}) //cache tooltip dimensions
            $speech.css({display:'none', visibility:'visible'})
            setting.$speech=$speech //remember ref to tooltip
        }
        return setting.$speech
        },
        
        positiontip:function($, $anchor, s, e){
            var $speech=s.$speech
            var $offset=$anchor.offset()
            var windowmeasure={w:$(window).width(), h:$(window).height(), left:$(document).scrollLeft(), top:$(document).scrollTop()} //get various window measurements
            var anchormeasure={w:$anchor.outerWidth(), h:$anchor.outerHeight(), left:$offset.left, top:$offset.top} //get various anchor link measurements
            var speechmeasure={w:$speech.data('measure').w, h:$speech.data('measure').h} //get tooltip measurements
            var x=anchormeasure.left
            var y=anchormeasure.top+anchormeasure.h
            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
            
            var isrightaligned=x!=anchormeasure.left //Boolean to indicate if tooltip is right aligned
            var istopaligned=y!=anchormeasure.top+anchormeasure.h+10 //Boolean to indicate if tooltip is top aligned
            
            
            var speechcss_before={opacity:0, left:x, top:(istopaligned)? y-speechmeasure.h-10 : y+speechmeasure.h+10}
            var speechcss_after={opacity:1, top:y+10}
            if (document.all && !window.msPerformance){ //detect IE8 and below
                delete speechcss_before.opacity //remove opacity property, as IE8- does not animate this property well with CSS triangles present
                delete speechcss_after.opacity
            }
            $speech.css(speechcss_before).show().animate(speechcss_after)
        },
        init:function($, $anchor, options){
            var s={speechtext:$anchor.attr('title'), speechid:$anchor.attr('rel')}
            $.extend(s, options)
            if (this.buildtooltip($, s)){
                if (s.speechtext) //if title attribute of anchor is defined
                    $anchor.attr('title', "") //disable it
                $anchor.click(function(e){
                    if (s.$speech.queue().length==0){
                        clearTimeout(s.hidetimer)
                        speechbubbles_tooltip.positiontip($, $anchor, s, e)
                    }
                })
                $speech.click(function(e){
                    s.hidetimer=setTimeout(function(){s.$speech.stop(true,true).hide()}, 200)
                })
            }
        }
    }
    jQuery.fn.speechbubble=function(options){
        var $=jQuery
        function processanchor(selector){
            return selector.each(function(){ //return jQuery obj
                var $anchor=$(this)
                    speechbubbles_tooltip.init($, $anchor, options)
            })
        }
        if (options && options.url)
            speechbubbles_tooltip.loadcontent($, this, options, processanchor)
        else
            processanchor(this)
    };



As you can see, a few lines under 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:

    <a style="cursor: pointer;" class="addspeech" rel="#name1">
    <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.

If someone could show me what I need to change and why, it would be massively appreciated!

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Tooltips style help please!

#2 jon.kiparsky  Icon User is offline

  • Pancakes!
  • member icon


Reputation: 7883
  • View blog
  • Posts: 13,396
  • Joined: 19-March 11

Re: Tooltips style help please!

Posted 22 February 2014 - 02:14 PM

java != javascript.
moving to the correct forum.
Was This Post Helpful? 0
  • +
  • -

#3 Lee_K  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 22-February 14

Re: Tooltips style help please!

Posted 22 February 2014 - 02:17 PM

I thought I was in the Javascript forum when I started the topic! Sorry! Dunno how that happened!...
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,892
  • Joined: 30-April 10

Re: Tooltips style help please!

Posted 22 February 2014 - 11:22 PM

First I will start by saying that styling belongs in CSS. Add a new class to cange one or the other and add the style rules in this style rule.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1