View Full Version : jQuery Quick Question About Variables

02-05-2011, 03:02 AM
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 ?

$.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>" +
return tTip;

/* Give each item with the class associated with
the plugin the ability to call the tooltip */

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() {
setTip(tTop, tLeft);
function() {

/* Delay the fade-in animation of the tooltip */
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);

stopTimer = function() {

/* 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(){
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);

02-05-2011, 08:07 PM
Can you elaborate a little?

This is currently settign the top and left positions as variables:

var tLeft = offset.left;
var tTop = offset.top;

This is applying the variables:

setTip(tTop, tLeft);

02-06-2011, 02:44 AM
Thanks for the reply Harbinger! :thumbsup:

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 (http://flowplayer.org/tools/demos/tooltip/index.htm) 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+ (http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo/index.html) has it set up.

Can someone point me in the right direction? All replies are much appreciated.

02-07-2011, 07:55 PM
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:

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:

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:


to this:

layout:"<div><span class='tooltipTop'/><span class='tooltipBottom'/></div>"

This will then generate a tooltip like:

<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:

.tooltip {
background: #99336c;
padding: 26px 20px; /* adjust this to suit */

.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

02-11-2011, 10:21 PM
thanks again harbingerOTV (http://www.codingforums.com/member.php?u=18597) for bearing with me.

props for the site too, its dope.:cool: