Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Hollywood North aka Vancouver, BC
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Quick Question About Variables

    Hi,
    im new to js and having a problem with a jQuery plugin i got from nettuts called bettertooltip. im using jQuery-1.5-min.js, if its of any relevance.

    How do i set the position as a variable so that later i can change it in the call ?



    Code:
            $.fn.betterTooltip = function(options){  
          
                /* Setup the options for the tooltip that can be 
                   accessed from outside the plugin              */  
                var defaults = {  
                    speed: 200,  
                    delay: 200  
                };  
          
                var options = $.extend(defaults, options);  
          
                /* Create a function that builds the tooltip 
                   markup. Then, prepend the tooltip to the body */  
                getTip = function() {  
                    var tTip =  
                    "<div class='tip'>" +  
                        "<div class='tipMid'>"    +  
                        "</div>" +  
                        "<div class='tipBtm'></div>" +  
                    "</div>";  
                    return tTip;  
                }  
                $("body").prepend(getTip());  
          
                /* Give each item with the class associated with 
                   the plugin the ability to call the tooltip    */  
                $(this).each(function(){  
          
                    var $this = $(this);  
                    var tip = $('.tip');  
                    var tipInner = $('.tip .tipMid');  
          
                    var tTitle = (this.title);  
                    this.title = "";  
          
                    var offset = $(this).offset();  
                    var tLeft = offset.left;  
                    var tTop = offset.top;  
                    var tWidth = $this.width();  
                    var tHeight = $this.height();  
          
                    /* Mouse over and out functions*/  
                    $this.hover(function() {  
                        tipInner.html(tTitle);  
                        setTip(tTop, tLeft);  
                        setTimer();  
                    },  
                    function() {  
                        stopTimer();  
                        tip.hide();  
                    }  
                );           
          
                /* Delay the fade-in animation of the tooltip */  
                setTimer = function() {  
                    $this.showTipTimer = setInterval("showTip()", defaults.delay);  
                }  
          
                stopTimer = function() {  
                    clearInterval($this.showTipTimer);  
                }  
          
                /* Position the tooltip relative to the class 
                   associated with the tooltip                */  
                setTip = function(top, left){  
                    var topOffset = tip.height();  
                    var xTip = (left-30)+"px";  
                    var yTip = (top-topOffset-60)+"px";  
                    tip.css({'top' : yTip, 'left' : xTip});  
                }  
          
                /* This function stops the timer and creates the 
                   fade-in animation                          */  
                showTip = function(){  
                    stopTimer();  
                    tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);  
                }  
            });  
        };

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Can you elaborate a little?

    This is currently settign the top and left positions as variables:
    Code:
    var tLeft = offset.left;  
    var tTop = offset.top;
    This is applying the variables:
    Code:
    setTip(tTop, tLeft);
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    exotic (02-05-2011)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Hollywood North aka Vancouver, BC
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply Harbinger!




    SUPER NOOBY mistake on my part, sorry about that.
    I realized that the whole plugin gets in the way of what im trying to do, so i suppose what I really need to do is just chop it down a bit.



    The only thing im trying to accomplish with this plugin is to:
    Instead of displaying a single background image (theyre all the same size even though the text/content within them varies in length),
    Display a div that contains three images (tipTop.png, tipMid.png, tipBtm.png).

    and to

    Have tipMid.png repeat itself vertically as many times as it needs to contain the length of the text/content




    Im guessing that what i would need to do is change the .tooltip style with js? or rather, change the plugin so that it only changes the .tooltip ?

    The ultimate goal is to be able to call the tooltip the way jQuery TOOLS has it set up, [$("#tTip img[title]").tooltip();]
    but for instead of a static image, have the tooltip (effectually) change its height to accommodate the content, the way net tuts+ has it set up.


    Can someone point me in the right direction? All replies are much appreciated.
    Last edited by exotic; 02-07-2011 at 08:21 AM.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Okay, so you want the jQuery TOOLS version to use 3 divs like the net tuts version, right?

    Inside the jquery.tools.js find this line:

    Code:
    f.tools.tooltip={conf:{effect:"toggle",fadeOutSpeed:"fast",predelay:0,delay:30,opacity:1,tip:0,position:["top","center"],offset:[0,0],relative:false,cancelDefault:true,events:{def:"mouseenter,mouseleave",input:"focus,blur",widget:"focus mouseenter,blur mouseleave",tooltip:"mouseenter,mouseleave"},layout:"<div/>",tipClass:"tooltip"},addEffect:function(a,b,c){o[a]=[b,c]}};
    You can then make it look like:

    Code:
    f.tools.tooltip={conf:{effect:"toggle",fadeOutSpeed:"fast",predelay:0,delay:30,opacity:1,tip:0,position:["top","center"],offset:[0,0],relative:false,cancelDefault:true,events:{def:"mouseenter,mouseleave",input:"focus,blur",widget:"focus mouseenter,blur mouseleave",tooltip:"mouseenter,mouseleave"},layout:"<div><span class='tooltipTop'/><span class='tooltipBottom'/></div>",tipClass:"tooltip"},addEffect:function(a,b,c){o[a]=[b,c]}};
    All that's really changing is this:
    Code:
    layout:"<div/>"
    to this:
    Code:
    layout:"<div><span class='tooltipTop'/><span class='tooltipBottom'/></div>"
    This will then generate a tooltip like:

    Code:
    <div class="tooltip"><span class="tooltipTop"></span><span class="tooltipBottom"></span>The Toll Tip Text</div>
    Then you can just modify the CSS to make it all play nice:

    Code:
    .tooltip {
    display:none;
    background: #99336c;
    font-size:12px;
    width:160px;
    padding: 26px 20px; /* adjust this to suit */
    color:#fff;	
    }
    
    .tooltip .tooltipTop {
    display: block;
    background: #e9dd3e;
    height: 20px; /* the height of your top image */
    position: absolute; 
    top: 0;
    left: 0;
    width: 200px; /* the width of the .tooltip + the total horizontal padding. */
    }
    
    .tooltip .tooltipBottom {
    display: block;
    background: #e9dd3e;
    height: 20px; /* the height of your bottom image */
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 200px; /* the width of the .tooltip + the total horizontal padding. */
    }
    That CSS was taken directly from: http://flowplayer.org/tools/demos/tooltip/index.htm
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Hollywood North aka Vancouver, BC
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks again harbingerOTV for bearing with me.


    props for the site too, its dope.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •