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);
}
});
};
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.
<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. */
}
Before you post, read our: 
